CSS（三）
CSS盒子模型
盒子模型解釋
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設置元素對應的樣式。盒子模型示意圖如下：
把元素叫做盒子，設置對應的樣式分別為：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
設置邊框
設置一邊的邊框，比如頂部邊框，可以按如下設置：
border-top-color:red; /* 設置頂部邊框顏色為紅色 */ border-top-width:10px; /* 設置頂部邊框粗細為10px */ border-top-style:solid;/* 設置頂部邊框的線性為實線，常用的有：solid(實線) dashed(虛線) dotted(點線); */
上面三句可以簡寫成一句：
border-top:10px solid red;
設置其它三個邊的方法和上面一樣，把上面的‘top‘換成‘left‘就是設置左邊，換成‘right‘就是設置右邊，換成‘bottom‘就是設置底邊。
四個邊如果設置一樣，可以將四個邊的設置合並成一句：
border:10px solid red;
設置內間距padding
設置盒子四邊的內間距，可設置如下：
padding-top：20px; /* 設置頂部內間距20px */ padding-left:30px;/* 設置左邊內間距30px */ padding-right:40px; /* 設置右邊內間距40px */ padding-bottom:50px; /* 設置底部內間距50px */
上面的設置可以簡寫如下：
padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設置的是 上 右 下 左 四個方向的內邊距值。 */
padding後面還可以跟3個值，2個值和1個值，它們分別設置的項目如下：
padding：20px 40px 50px; /* 設置頂部內邊距為20px，左右內邊距為40px，底部內邊距為50px */ padding：20px 40px; /* 設置上下內邊距為20px，左右內邊距為40px*/ padding：20px; /* 設置四邊內邊距為20px */
設置外間距margin
外邊距的設置方法和padding的設置方法相同，將上面設置項中的‘padding‘換成‘margin‘就是外邊距設置方法。
盒子模型的尺寸
按照下面代碼制作頁面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子的真實尺寸</title> <style type="text/css"> .box01{width:50px;height:50px;background-color:gold;} .box02{width:50px;height:50px;background-color:gold;border:50px solid #000} .box03{width:50px;height:50px;background-color:gold;border:50px solid #000;padding: 50px;} </style> </head> <body> <div class="box01">1</div> <br /> <div class="box02">2</div> <br /> <div class="box03">3</div> </body> </html>
通過上面的頁面得出結論：盒子的width和height設置的是盒子內容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：
- 盒子寬度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
margin相關技巧
1、設置元素水平居中： margin:x auto;
2、margin負值讓元素位移及邊框合並
外邊距合並
外邊距合並指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合並後的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。解決方法如下：
1、使用這種特性
2、設置一邊的外邊距，一般設置margin-top
3、將元素浮動或者定位
margin-top 塌陷
在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設置失敗，解決方法如下：
1、外部盒子設置一個邊框
2、外部盒子設置 overflow:hidden
3、使用偽元素類：
.clearfix:before{ content: ‘‘; display:table; }
CSS（三）