一、概述
CSS盒模型是定義元素周圍的間隔、尺寸、外邊距、邊框以及文本內容和邊框之間內邊距的一組屬性的集合。
示例代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;} 8 9 .boxWrapper{ 10 width: 150px; 11 height: 150px; 12 background: #ccc; 13 margin: 20px 20px 20px 20px; 14 padding: 20px 20px 20px 20px; 15 border: 20px solid #00f; 16 } 17 .boxInner{ 18 width: 100px; 19 height: 100px; 20 border: 10px solid #000; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="boxWrapper"> 26 <div class="boxInner"></div> 27 </div> 28 </body> 29 </html>
效果圖：
由此可見：外邊距margin是不可見的，如果設置了父元素的背景，就可以看到；背景色在邊框區域設置一個不同的背景，就可以看到內邊距（padding）區域。並且盒模型是由margin（外邊界）+border（邊框）+padding（內邊距）+content（內容）構成的。
下面，我們來介紹CSS盒模型的這些屬性：
二、屬性介紹
-
margin屬性
概念：margin屬性應用於盒子外面的空間，或者是位於盒子與文檔中其他元素之間的區域，或者是盒子與瀏覽器窗口之間的區域。margin長在盒子外圍的，不會對盒子本身的大小造成影響。
屬性：margin-top(上外邊界)、margin-right(右外邊界)、margin-bottom(下外邊界)、margin-left(左外邊界)
值：支持length、百分比、auto
用法：
margin設置方法：
1: margin:10px 四周(上，右，下，左)
2: margin:10px 20px 上下 左右
3: margin:10px 20px 30px 上 左右 下
4:margin:10px 20px 30px 40px 上右下左
5:margin支持負值！！
6:讓子元素在父元素里面左右居中：margin:0 auto;
7:margin常見的bug:
- a:當父元素和子元素都沒有浮動的情況下：給第一個子元素添加margin-top:會錯誤的把margin值加在父元素上面
實例代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;} 8 9 .boxWrapper{ 10 width: 150px; 11 height: 150px; 12 background: #ccc; 13 } 14 .boxInner{ 15 width: 100px; 16 height: 100px; 17 margin-top: 20px; 18 background: skyblue; 19 } 20 .other{ 21 width: 50px; 22 height: 50px; 23 background: #999; 24 /* margin-top: 20px; */ 25 } 26 </style> 27 </head> 28 <body> 29 <div class="boxWrapper"> 30 <div class="boxInner"></div> 31 <div class="other"></div> 32 </div> 33 </body> 34 </html>
效果如圖：
結論：當父元素里的第一個子元素（塊元素），添加margin-top的時候，會錯誤的把margin-top的值添加給父元素（建立在當前的元素們，沒有添加邊框和浮動的前提下）
解決方法：
- bfc 給父元素添加overflow:hidden;推薦使用
- 給父元素和子元素添加浮動屬性；
- 可以給父元素添加邊框
- 把margin改為padding
- b：相鄰兩個元素上下margin會重疊，按照較大的值設置。
示例代碼：
1 .boxInner{ 2 width: 100px; 3 height: 100px; 4 margin-bottom: 20px; 5 background: skyblue; 6 } 7 .other{ 8 width: 50px; 9 height: 50px; 10 background: #999; 11 margin-top: 20px; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="boxWrapper"> 17 <div class="boxInner"></div> 18 <div class="other"></div> 19 </div> 20 </body> 21 </html>
效果圖：
可以看出外邊距折疊。當boxInner的下外邊距和other元素的上外邊距接觸時，外邊距發生了折疊！，他們之間只有20px,而不是40px;
2.邊框
1.border屬性：用來控制盒邊框的寬度，樣式，顏色。
屬性：值（不支持百分比）常用px
border:10px solid red;
border-width:10px;
border-style:solid;
border-color:red;
1:線性： solid(實線) dashed(虛線) dotted(點狀線) double(雙線) none/0(沒有邊框)
2：給單一一個方向添加邊框：
border-left/right/top/bottom:10px solid yellow;
3:邊框設置方法;
border:solid red;
border-width:;
一個值：四周
兩個值：上下 左右
三個值：上 左右 下
四個值：上右下左
4:transparent; 代替顏色值 為 透明
3.padding屬性：內邊距是元素的內容和邊框之間的區域
用法：
1:padding是添加在父元素（盒子）上的
2:padding 調整子元素在父元素里面的位置關系
3:padding會把盒子撐大。
4：想讓盒子保持原有的大小：在寬高的基礎上減掉padding值。
5:給單一一個方向添加padding值： padding-top/bottom/left/right:
6:
padding設置方法：
padding:10px 四周
padding:10px 20px 上下 左右
padding:10px 20px 30px 上 左右 下
padding:10px 20px 30px 40px 上右下左
7：padding不會對背景圖造成影響
8：padding的值不能為負值！！！
4.對比padding和margin
1.padding區域是邊框內邊緣和內容外邊緣之間的區域。
2.auto關鍵字對padding屬性不起作用。
3.padding屬性不可以接受復制。
4.padding不存在內邊距折疊，只有外邊距折疊。