css第03天

一、css三大特性

1、層疊性

​ 相同選擇器給設定相同的樣式，此時一個樣式就會覆蓋（層疊）另一個衝突的樣式。層疊性主要解決樣式衝突的問題

​ 層疊性原則:

• 樣式衝突，遵循的原則是就近原則，哪個樣式離結構近，就執行哪個樣式
• 樣式不衝突，不會層疊

2、繼承性

​ CSS中的繼承: 子標籤會繼承父標籤的某些樣式，如文字顏色和字號。恰當地使用繼承可以簡化程式碼，降低 CSS 樣式的複雜性。

子元素可以繼承父元素的樣式：

​ （text-，font-，line-這些元素開頭的可以繼承，以及color屬性）

繼承性口訣：龍生龍，鳳生鳳，老鼠生的孩子會打洞

行高的繼承性：

 body {
   font:12px/1.5 Microsoft YaHei；
 }
 

• 行高可以跟單位也可以不跟單位
• 如果子元素沒有設定行高，則會繼承父元素的行高為 1.5
• 此時子元素的行高是：當前子元素的文字大小 * 1.5
• body 行高 1.5 這樣寫法最大的優勢就是裡面子元素可以根據自己文字大小自動調整行高

3、優先順序

當同一個元素指定多個選擇器，就會有優先順序的產生。

• 選擇器相同，則執行層疊性
• 選擇器不同，則根據選擇器權重執行

繼承或*            0，0，0，0
元素選擇器         0，0，0，1
類選擇器           0，0，1，0
ID選擇器           0，1，0，0
行內樣式style""    1,0,0,0
!important         無窮大
 

優先順序注意點:

1. 權重是有4組數字組成,但是不會有進位。

2. 可以理解為類選擇器永遠大於元素選擇器, id選擇器永遠大於類選擇器,以此類推..

3. 等級判斷從左向右，如果某一位數值相同，則判斷下一位數值。

4. 可以簡單記憶法: 萬用字元和繼承權重為0, 標籤選擇器為1,類(偽類)選擇器為 10, id選擇器 100, 行內樣式表為 1000, !important 無窮大.

5. 繼承的權重是0， 如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是 0。

權重疊加：如果是複合選擇器，則會有權重疊加，需要計算權重。

• div ul li ------> 0,0,0,3
• .nav ul li ------> 0,0,1,2
• a:hover -----—> 0,0,1,1
• .nav a ------> 0,0,1,1

二、盒子模型

1、網頁佈局的本質

網頁佈局的核心本質： 就是利用 CSS 擺盒子。

網頁佈局過程：

1. 先準備好相關的網頁元素，網頁元素基本都是盒子 Box 。
2. 利用 CSS 設定好盒子樣式，然後擺放到相應位置。
3. 往盒子裡面裝內容

2、盒子模型（Box Model）組成

​ 盒子模型：把 HTML 頁面中的佈局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。

​ CSS 盒子模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：邊框、外邊距、內邊距、和 實際內容

3、邊框（border）

3.1、邊框的使用

1、border可以設定元素的邊框。邊框有三部分組成：邊框寬度(粗細) 邊框樣式 邊框顏色；

2、語法：

 border : border-width || border-style || border-color;   

邊框樣式 border-style 可以設定如下值：

• none：沒有邊框即忽略所有邊框的寬度（預設值）
• solid：邊框為單實線(最為常用的)
• dashed：邊框為虛線
• dotted：邊框為點線

3、邊框的合寫分寫

邊框簡寫：

 border: 1px solid red;  

邊框分開寫法：

 border-top: 1px solid red;  /* 只設定上邊框， 其餘同理 */   

3.2、表格的細線邊框

1、border-collapse 屬性控制瀏覽器繪製表格邊框的方式。它控制相鄰單元格的邊框。

2、語法：

 border-collapse:collapse; 

collapse 單詞是合併的意思

border-collapse: collapse; 表示相鄰邊框合併在一起

3.3、邊框會影響盒子實際大小

邊框會額外增加盒子的實際大小。因此我們有兩種方案解決：

• 測量盒子大小的時候,不量邊框。
• 如果測量的時候包含了邊框,則需要 width/height 減去邊框寬度

4、內邊距（padding）

4.1、內邊距的使用方式

1、padding 屬性用於設定內邊距，即邊框與內容之間的距離。

4.2、內邊距會影響盒子實際大小

1、當我們給盒子指定 padding 值之後，發生了 2 件事情：

1. 內容和邊框有了距離，添加了內邊距。
2. padding影響了盒子實際大小。

2、內邊距對盒子大小的影響：

• 如果盒子已經有了寬度和高度，此時再指定內邊框，會撐大盒子。
• 如何盒子本身沒有指定width/height屬性, 則此時padding不會撐開盒子大小。

3、解決方案：

​ 如果保證盒子跟效果圖大小保持一致，則讓 width/height 減去多出來的內邊距大小即可。

5、外邊距（margin）

5.1、外邊距的使用方式

margin 屬性用於設定外邊距，即控制盒子和盒子之間的距離。

5.2、外邊距典型應用

外邊距可以讓塊級盒子水平居中的兩個條件：

• 盒子必須指定了寬度（width）。
• 盒子左右的外邊距都設定為 auto 。

常見的寫法，以下三種都可以：

margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是讓塊級元素水平居中，行內元素或者行內塊元素水平居中給其父元素新增 text-align:center 即可。

5.3、外邊距合併

使用 margin 定義塊元素的垂直外邊距時，可能會出現外邊距的合併。

主要有兩種情況:

1、相鄰塊元素垂直外邊距的合併

​ 當上下相鄰的兩個塊元素（兄弟關係）相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合併。

解決方案：
儘量只給一個盒子新增 margin 值。

2、巢狀塊元素垂直外邊距的塌陷

​ 對於兩個巢狀關係（父子關係）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。

解決方案：

• 可以為父元素定義上邊框。
• 可以為父元素定義上內邊距。
• 可以為父元素新增 overflow:hidden。

5.4、清除內外邊距

​ 網頁元素很多都帶有預設的內外邊距，而且不同瀏覽器預設的也不一致。因此我們在佈局前，首先要清除下網頁元素的內外邊距。

 * {
    padding:0;   /* 清除內邊距 */
    margin:0;    /* 清除外邊距 */
  }

​ 注意：行內元素為了照顧相容性，儘量只設置左右內外邊距，不要設定上下內外邊距。但是轉換為塊級和行內塊元素就可以了