CSS盒子模型（上）
盒子模型（Box Model）是CSS控制頁面時一個很重要的概念。只有很好地掌握了盒子模型以及其中每個元素的用法，才能真正地控制好頁面中的各個元素。
所有頁面中的元素都可以看成是一個盒子，占據着一定的頁面空間。 一般來說這些被占據的空間往往都要比單純的內容大。 可以通過調整盒子的邊框和邊距等參數，來調節盒子的位置和大小。一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響。
掌握盒子模型需要從兩方面來理解：一是理解單個的盒子的內部結構；二是理解多個盒子之間的相互關系。
本文首先講解獨立的盒子相關的性質，然后介紹在普通情況下盒子的排列關系。下一次將更深入地講解浮動和定位的相關內容。
一． 盒子模型概念
1.現實生活中的盒子：
圖1 現實生活中的盒子
2. 盒子模型（Box Model）
在網頁布局中，為了能夠使紛繁復雜的各個部分合理地進行組織，通過研究，總結出了一套完整的、行之有效的原則和規范，這就是“盒子模型”的由來。
在CSS中，一個獨立的盒子模型由內容(content)、邊框(border)、填充(padding)和邊界(margin)4個部分組成：
內容(content)：對應盒內物品
邊框(border)：對應包裝盒的紙殼，具有厚度
填充(padding)：位於邊框內部，是內容與邊框的距離，對應包裝盒的填充部分
邊界(margin)：位於邊框外部，是邊框外面周圍的間隙，對應紙殼外圍間隙
圖2 標准盒子模型
3. 盒子模型的三維立體結構圖
圖3 CSS2.0盒子模型的三維立體結構圖
▪邊框（border），位於盒子的第一層。
▪元素內容（content）、內邊距（padding），兩者同位於第二層。
▪背景圖（background-image），位於第三層。
▪背景色（background-color），位於第四層。
▪整個盒子的外邊距（margin），位於第五層。
二． 盒子模型屬性
1. 邊框（border）：用於分隔不同元素、會占據空間、有4條邊框、可無邊框（設置為0）。
語法：
border : border-width || border-style || border-color
取值：
該屬性是復合屬性。默認值為： medium none 。 border-color 的默認值將采用文本顏色。
邊框屬性簡寫
同時設置邊框的三個屬性：border: 3px solid blue;
示例代碼1：邊框屬性簡寫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>邊框屬性簡寫</title> <style> div{ width: 200px; height: 200px; border: 3px solid blue; } </style> </head> <body> <div>盒子</div> </body> </html>
① border-width：設置對象邊框的寬度。
語法：
border-width : medium | thin | thick | length
取值：
medium : 默認值。默認寬度
thin : 小於默認寬度
thick : 大於默認寬度
length : 由浮點數字和單位標識符組成的長度值。不可為負值。
說明：
如果提供全部四個參數值，將按上－右－下－左的順序作用於四個邊框（順時針）。如果只提供一個，將用於全部的四條邊。如果提供兩個，第一個用於上－下，第二個用於左－右。如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
設置border-width、border-color前要設置border-style。
分別設置四條邊框：
| 屬性 |
語法規則 |
說 明 |
| border-top-width |
border-top-width:5px; |
上邊框粗細為5px |
| border-right-width |
border-right-width:10px; |
右邊框粗細為10px |
| border-bottom-width |
border-bottom-width:8px; |
下邊框粗細為8px |
| border-left-width |
border-left-width:22px; |
左邊框粗細為22px |
示例代碼2:分別設置四條邊框（修改示例代碼1的style）
<style> div{ border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; width:200px; height:200px; border-style: solid; } </style>
同時設置4條邊框：
| 屬性 |
語法規則 |
說 明 |
| border-width |
border-width:5px; |
4條邊框粗細均為5px |
| border-width |
border-width:20px 2px; |
上、下邊框粗細為20px 左、右邊框粗細為2px |
| border-width |
border-width:5px 1px 6px; |
上邊框粗細為5px 左、右邊框粗細為1px 下邊框粗細為6px |
| border-width |
border-width:1px 3px 5px 2px; |
上邊框粗細為1px 右邊框粗細為3px 下邊框粗細為5px 左邊框粗細為2px |
示例代碼3:同時設置4條邊框（修改示例代碼1的style）
<style> div{ border-width:5px 10px 20px; width:200px; height:200px; border-style: solid; } </style>
② border-color: 指定顏色。
語法：
border-color : color
取值：
color:指定顏色。附：CSS 顏色十六進制值表
說明：
▪從#后第1位開始每2位為一組,表示一個顏色的值（這是以十六進制來算的）：第1組為紅色，第2組為綠色，第3組為藍色。根據三基色的原理，紅色與綠色混合為黃色，紅色與藍色混為紫色，綠色與藍色混合為青色。
▪數值大顏色亮
▪十六進制值是成對重復的可以簡寫，效果一樣。例如:#FF0000 可以寫成#F00。但如果不重復就不可以簡寫，例如#FC1A1B 必須寫滿六位。
▪紅色#FF0000，綠色#00ff00，藍色為#0000ff，黃色為#FFFFOO，紫色為#ff00ff,青色為#00ffff,白色#ffffff,黑色#000000，要記住（上面所提到的都是飽和色）。
分別設置四條邊框和同時設置4條邊框語法同border-width
示例代碼4:同時設置4條邊框的顏色（修改示例代碼3的style）
<style> div{ border-color: gold pink blue red; border-width:5px 10px 20px; width:200px; height:200px; border-style: solid; } </style>
③ border-style：設置對象邊框的樣式。
語法：
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
取值：
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 的值畫3D凸槽
inset : 根據 border-color 的值畫3D凹邊
outset : 根據 border-color 的值畫3D凸邊
分別設置四條邊框和同時設置4條邊框語法同border-width
示例代碼5:同時設置4條邊框（修改示例代碼4的style）
<style> div{ border-style: dotted; border-color: gold pink blue red; border-width:5px 10px 20px; width:200px; height:200px; } </style>
④ inherit：規定應該從父元素繼承 border 屬性的設置。
注:當有多條規則作用於同一個邊框時，會產生沖突，后面的設置會覆蓋前面的設置。
2. 填充(padding)：用於控制內容與邊框之間的距離；會占據空間；
可設置盒子模型上、右、下、左4個方向的內邊距值；padding屬性的值可以為0，即無內邊距。
分別設置4個方向的內邊距：
| 屬性 |
語法規則 |
說 明 |
| padding-left |
padding-left:10px; |
左內邊距為10px |
| padding-right |
padding-right:5px; |
右內邊距為5px |
| padding-top |
padding-top:20px; |
上內邊距為20px |
| padding-bottom |
padding-bottom:8px; |
下內邊距為8px |
同時設置4個方向的內邊距：
| 屬性 |
語法規則 |
說 明 |
| padding |
padding:10px ; |
設置4個方向內邊距均為10px |
| padding |
padding:10px 5px; |
上、下內邊距為10px 左、右內邊距為5px |
| padding |
padding:30px 8px 10px ; |
上內邊距為30px 左、右內邊距為8px 下內邊距為10px |
| padding |
padding:20px 5px 8px 10px ; |
上內邊距為20px 右內邊距為5px 下內邊距為8px 左內邊距為10px |
示例代碼6:同時設置4個方向的內邊距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>填充(padding)</title> <style> #box1{ width: 400px; height: 300px; background: pink; } #box2{ padding: 30px 8px 10px; width: 300px; height: 200px; background: green; } </style> </head> <body> <div id="box1"> <div id="box2">同時設置4個方向的內邊距</div> </div> </body> </html>
3.邊界(margin)：用於控制元素與元素之間的距離；會占據空間；
可設置盒子模型上、右、下、左4個方向的外邊距值；margin屬性的值可以為0，即無外邊距。
分別設置4個方向的內邊距和同時設置4個方向的內邊距語法同padding屬性設置方法類似。
示例代碼7:同時設置4個方向的外邊距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>邊界(margin)</title> <style> #box1{ border:1px solid red; width: 400px; height: 300px; background: pink; } #box2{ margin: 10px 30px; padding: 30px 8px 10px; width: 300px; height: 200px; background: green; } </style> </head> <body> <div id="box1"> <div id="box2">同時設置4個方向的外邊距</div> </div> </body> </html>
注：body的外邊距，本身是一個盒子，默認情況下，有若干像素外填充。
由於各個瀏覽器存在着默認的內外邊距值且不相同，我們需要將所有瀏覽器的默認內外邊距，都從0計算。 所以，我們用
body,div{/*清除默認外邊距和內邊距*/
margin: 0;
padding: 0;
}
去除瀏覽器的默認內外邊距。建議要去除的寫上，不建議使用*{margin:0;padding:0;}。
示例代碼8:去除body外邊距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>去除body外邊距</title> <style> body,div{ margin: 0px; padding: 0px; } div{ border:1px solid red; width: 400px; height: 300px; background: pink; } </style> </head> <body> <div id="box">此時是貼在body邊框上</div> </body> </html>
效果：
圖4 去除body外邊距
4. 內容(content)
內容本身的寬=width
內容本身的高=height
5.盒子模型總尺寸
盒子模型總尺寸=border-width+padding+margin+內容尺寸（寬度/高度）
圖5 盒子模型總尺寸
三． 盒子之間的關系
單獨的一個盒子不難理解，實際上網頁往往是很復雜的，一個網頁可能存在着大量的盒子，並且它們之間以各種關系相互影響着。為了適應各種排版要求，CSS規范的思路是：首先確定一種標准的排版模式，這個就是“標准流”。
但僅通過標准流方式，很多排版是無法實現的，CSS規范中又給出了另外幾種對盒子進行布局的方法，包括“浮動”和“定位”等屬性，對某些元素進行特殊排版。
1. DOM樹
一個HTML從表面看是文本文件，從邏輯上看則具有內在的層次關系。“樹”可以表示具有層次關系的結構。
任意一個HTML文檔都對應一棵DOM樹，body是所有對象的根節點。而該DOM樹的節點如何在瀏覽器中表現，則由CSS確定。即HTML控制網頁的結構，CSS控制網頁的表現。
圖6 HTML文檔對應DOM樹
2. 標准文檔流
“標准文檔流”（Normal Document Stream），簡稱“標准流”，是指在不使用其他與排列和定位相關的特殊CSS規則時，各種元素的排列規則。
如上圖共有四層結構，頂層為body，第二層為ul，第三層為li，第四層為文本。這四種元素分為兩類：
① 塊級元素（block level）
li占據着一個矩形的區域，並且和相鄰的li依次豎直排列，不會排在同一行中。ul也具有同樣的性質，占據着一個矩形的區域，並且和相鄰的ul依次豎直排列，不會排在同一行中。這類元素稱為“塊級元素” ，即它們總是以一個塊的形式表現出來，並且跟同級的兄弟塊依次豎直排列，左右撐滿。
常見的塊標記：address、block、div、dl、fieldset、form、h1 ~ h6、menu、ol、ul、p、table
② 行內元素（inline）
對於文字這類元素，各個字母之間橫向排列，到最右端自動折行，這就是另一種元素，稱為“行內元素”。比如<strong></strong>標記，就是一個典型的行內元素，這個標記本身不占有獨立的區域，僅僅是在其他元素的基礎上指出了一定的范圍。再比如，最常用的<a>、<span>標記。
3.瀏覽器處理元素過程：
第1步：從body開始，依次把兩個ul塊豎直排列。
第2步：分別進入每一個ul查看它的下級元素，把兩個li塊豎直排列在ul中。
第3步：進入li內部，是一行文本，按行內元素排列文字。
4．<div>標記與<span>標記
為了更好地理解“塊級元素”和“行內元素”，這里重點介紹在CSS排版的頁面中經常使用的<div>和<span>標記。
div簡單而言就是一個塊級容器標記，可以容納段落、標題、表格、圖片，乃至章節、摘要和備注等各種HTML元素。可以把div當做一個獨立的對象，用CSS進行控制。<span>和<div>一樣，在HTML元素中可以作為獨立的對象進行處理。
兩者的區別在於：div是一個塊級元素，span僅僅是一個行內元素，在它的前后都不會換行。span沒有結構上的意義，純粹是應用樣式，當其他行內元素都不適合時，就可以用span標記。div標記可以包含span，span不可以包含div。
5. 盒子在標准流中的定位原則
如果要精確地控制盒子的位置，就必須對margin有更深入的了解。padding只存在於一個盒子內部，所以通常它不會涉及與其他盒子之間的關系和相互影響的問題。margin則用於調整不同的盒子之間的位置關系。
① 行內元素之間的水平margin
圖7 行內元素之間的水平margin
兩個塊之間的距離為：30px+40px=70px。
② 塊級元素之間的豎直margin
圖8 塊級元素之間的豎直margin
如果不是行內元素，而是豎直排列的塊級元素，margin的取值情況就會有所不同。
兩個塊級元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者，如圖所示。這個現象稱為margin的“塌陷”（或稱為“合並”）現象，意思是說較小的margin塌陷（合並）到了較大的margin中。
6. 嵌套盒子之間的margin
除了上面提到的行內元素間隔和塊級元素間隔這兩種關系外，還有一種父子關系，它的margin值對CSS排版也有重要的作用。當一個<div>塊包含在另一個<div>塊中時，便形成了典型的父子關系。
其中子塊的margin將以父塊的內容為參考，如圖4.22所示。
圖9 嵌套盒子之間的margin
在沒有設置width和height的情況下，高度和寬度都會自動延伸和收縮。 在標准流中，一個塊級元素的盒子水平方向的寬度會自動延伸，直至上一級盒子的限制位置。對於高度，div都是以里面的內容的高度來確定的，也就是會自動收縮到能包容下內容的最小高度。
示例代碼7:在沒有設置width和height的情況下，高度和寬度都會自動延伸和收縮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子的嵌套</title> <style> #box1{//父盒子 設置寬度 border:1px solid red; width: 300px; height: 150px; background: pink; } #box2{//子盒子 不設置寬度 border:1px solid red; height: 100px; background: green; } </style> </head> <body> <div id="box1">父盒子 <div id="box2">子盒子寬度 自動延伸為 父盒子寬度</div> </div> </body> </html>
效果：
圖10 子盒子寬度延伸為父盒子寬度
如果更改代碼：父盒子不設置高度，子盒子設置高度，則父盒子高度會收縮至子盒子的高度，效果如下：
圖11 父盒子高度收縮為子盒子高度
7. margin屬性可以設置為負值
上面提及margin的時候，它的值都是正數。其實margin的值也可以設置為負數，而且有關的巧妙運用方法也非常多。
圖12 margin-left=-50px
CSS盒子模型（下）：CSS3可伸縮框屬性（Flexible Box）
轉載需注明轉載字樣，標注原作者和原博文地址。
關注微信公眾號獲得及時推送
