web前端之CSS技術（三）

續web前端之CSS技術（一）
續web前端之CSS技術（二）

9. 盒子模型

9.1 看透網頁佈局的本質

網頁佈局過程：

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

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

9.2 盒子模型的組成

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

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

9.3 邊框(border)

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

1. 語法：

   border: border-width border-style border-color
   

   邊框可分開寫：

   border-top: border-width border-style border-color				/*上邊框*/
   border-bottom: border-width border-style border-color			/*下邊框*/
   border-left: border-width border-style border-color			/*左邊框*/
   border-right: border-width border-style border-color			/*右邊框*/
   

2. 解釋：

屬性	作用
border-width	邊框粗細，單位是px
border-style	邊框樣式，如實線、虛線等
border-color	邊框顏色

注意： 三種屬性的寫法沒有順序。

3. border-style值：

參數值	作用
none	無邊框。與任何指定的border-width值無關
hidden	隱藏邊框。IE不支持
dotted	在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+爲點線。否則爲實線
dashed	在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+爲虛線。否則爲實線
solid	實線邊框
double	雙線邊框。兩條單線與其間隔的和等於指定的border-width值
groove	根據border-color的值畫3D凹槽
ridge	根據border-color的值畫菱形邊框
inset	根據border-color的值畫3D凹邊
outset	根據border-color的值畫3D凸邊

4. 注意：

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

1. 測量盒子大小的時候，不量邊框.
2. 如果測量的時候包含了邊框，則需要 width/height減去邊框寬度

9.4 內邊距(padding)

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

1. 語法：

   padding-top: value				/*上內邊距*/
   padding-bottom: value			/*下內邊距*/
   padding-left: value			/*左內邊距*/
   padding-right: value			/*右內邊距*/
   

2. 解釋：
   value表示要設置的內邊距的像素，單位是px

3. 複合寫法：

   • padding: top_value right_value bottom_value left_value
   • padding: top_value right_and_right_value bottom_value
   • padding: top_and_bottom_value right_and_left_value
   • padding: top_and_right_and_bottom_and_left_value

4. 注意：

   • 內邊距會影響盒子的實際大小。
   • 如果盒子已經有了寬度和高度，此時再指定內邊框，會撐大盒子。
   • 如果保證盒子跟效果圖大小保持一致，則讓width/height減去多出來的內邊距大小即可。
   • 如果盒子本身沒有指定width/height屬性, 則此時padding不會撐開盒子。

9.5 外邊距(margin)

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

1. 語法：

   margin-top: value				/*上內邊距*/
   margin-bottom: value			/*下內邊距*/
   margin-left: value			/*左內邊距*/
   margin-right: value			/*右內邊距*/
   

2. 解釋：
   value表示要設置的內邊距的像素，單位是px

3. 複合寫法：

   • margin: top_value right_value bottom_value left_value
   • margin: top_value right_and_right_value bottom_value
   • margin: top_and_bottom_value right_and_left_value
   • margin: top_and_right_and_bottom_and_left_value

   margin 複合寫法代表的意義跟 padding 完全一致。

4. 外邊距典型應用：

   外邊距可以讓塊級盒子水平居中，但是必須滿足兩個條件：

   • 盒子必須指定了寬度(width)
   • 盒子左右的邊距都設爲auto

   常見的寫法，以下三種都可以：
   · margin-left: auto; margin-right: auto;
   · margin: auto;
   · margin: 0 auto; （最常用）

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

5. 外邊距合併：

   使用 margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。
   主要有兩種情況：
   · 相鄰塊元素垂直外邊距的合併
   · 嵌套塊元素垂直外邊距的塌陷

   • 相鄰塊元素垂直外邊距的合併
             當上下相鄰的兩個塊元素（兄弟關係）相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top，則他們之間的垂直間距不是margin-bottom與 margin-top之和。取兩個值中的較大者，這種現象被稱爲相鄰塊元素垂直外邊距的合併。
     解決方案：只給一個盒子添加margin值
     

   • 嵌套塊元素垂直外邊距的塌陷
             對於兩個嵌套關係（父子關係）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。

     解決方案：
     · 可以爲父元素定義上邊框
     · 可以爲父元素定義上內邊距
     · 可以爲父元素添加overflow:hidden
     還有其他方法，比如浮動、固定，絕對定位的盒子不會有塌陷問題
     

9.6 清除內外邊距

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

1. 語法：

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

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

9.7 圓角邊框

border-radius屬性用於設置元素的外邊框圓角。

1. 語法：

   border-radius: length;
   

2. 注意：
   · 參數值可以爲數值或百分比的形式
   · 如果是正方形，想要設置爲一個圓，把數值修改爲高度或者寬度的一半即可，或者直接寫爲 50%
   · 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角
   · 分開寫：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
   · 兼容性： ie9+ 瀏覽器支持, 但是不會影響頁面佈局,可以放心使用

9.8 盒子陰影

box-shadow 屬性用於爲盒子添加陰影。

1. 語法：

   box-shadow: h-shadow v-shadow blur spread color inset;
   

2. 解釋：

值	描述
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊距離。
spread	可選。陰影的尺寸。
color	可選。陰影的顏色。
inset	可選。將外部陰影（outset）改爲內部陰影。

3. 注意：
   · 默認的是外陰影(outset), 但是不可以寫這個單詞,否則造成陰影無效
   · 盒子陰影不佔用空間，不會影響其他盒子排列。

9.9 文字陰影

text-shadow屬性將陰影應用於文本。

1. 語法：

   text-shadow: h-shadow v-shadow blur color;
   

2. 解釋：

值	描述
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊距離。
color	可選。陰影的顏色。

10. 浮動

10.1 傳統網頁佈局的三種方式

網頁佈局的本質——用 CSS 來擺放盒子。 把盒子擺放到相應位置。
CSS 提供了三種傳統佈局方式(簡單說,就是盒子如何進行排列順序)：
· 普通流（標準流）
· 浮動
· 定位

10.2 標準流（普通流/文本流）

所謂的標準流：就是標籤按照規定好默認方式排列.

1. 塊級元素會獨佔一行，從上向下順序排列。
   · 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2. 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。
   · 常用元素：span、a、i、em 等

   以上都是標準流佈局，我們前面學習的就是標準流，標準流是最基本的佈局方式。 這三種佈局方式都是用來擺放盒子的，盒子擺放到合適位置，佈局自然就完成了。

3. 實際開發中，一個頁面基本都包含了這三種佈局方式 。

10.3 爲什麼需要浮動

有很多的佈局效果，標準流沒有辦法完成，此時就可以利用浮動完成佈局。 因爲浮動可以改變元素標籤默認的排列方式。
浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。
網頁佈局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。

10.4 什麼是浮動

float屬性用於創建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。

1. 語法：

   選擇器 { float: 屬性值; }
   

2. 解釋：

屬性值	描述
none	元素不浮動（默認值）
left	元素左浮動
right	元素右浮動

10.5 浮動特性

1. 浮動元素會脫離標準流(脫標)
2. 浮動的元素會一行內顯示並且元素頂部對齊
3. 浮動的元素會具有行內塊元素的特性
   • 如果塊級盒子沒有設置寬度，默認寬度和父級一樣寬，但是添加浮動後，它的大小根據內容來決定
   • 浮動的盒子中間是沒有縫隙的，是緊挨在一起的
   • 行內元素同理
4. 注意：
   • 浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊。
   • 先用標準流的父元素排列上下位置, 之後內部子元素採取浮動排列左右位置。
   • 一個盒子裏面有多個子盒子，如果其中一個盒子浮動了，那麼其他兄弟也應該浮動，以防止引起問題。

10.6 清除浮動

1. 由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不佔有位置，最後父級盒子高度爲 0 時，就會影響下面的標準流盒子。
   

2. 如果父盒子本身有高度，則不需要清除浮動

3. 清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了

4. 語法：

   選擇器 {clear: 屬性值;}
   

5. 解釋：

屬性值	描述
left	不允許左側有浮動元素（清除左側浮動元素的影響）
right	不允許右側有浮動元素（清除右側浮動元素的影響）
both	同時清除左右兩側浮動元素的影響

6. 清除浮動的方法：

   • 額外標籤法
     額外標籤法會在浮動元素末尾添加一個空的標籤。例如 <div style=”clear:both”></div>，或者其他標籤（如<br />等）。
     注意： 要求這個新的空標籤必須是塊級元素。

   • 父級添加 overflow 屬性
     可以給父級添加 overflow屬性，將其屬性值設置爲hidden、 auto或 scroll 。

   • 父級添加after僞元素
     :after方式是額外標籤法的升級版。也是給父元素添加

     .clearfix:after { 
      content: ""; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden; 
     } 
     .clearfix { /* IE6、7 專有 */ 
      *zoom: 1;
     }
     

   • 父級添加雙僞元素
     也是給父元素添加

     .clearfix:before, .clearfix:after {
      content:"";
      display:table; 
     }
     .clearfix:after {
      clear:both; 
     }
      .clearfix {
      *zoom:1;
     }