* 含義： 所謂盒子模型，是指css中，設置一個盒子的寬高（width，height）值，是按盒子的“內容區”設置，還是按盒子的“邊框區”設置的問題。 傳統上，設置盒子的寬高指的是設置盒子內容區的寬高。 這個屬性就是可以改變這個特性，可以將盒子的寬高屬性，指定為是盒子的邊框區域的寬高值。 可用值： ``` box-sizing: content-box; //內容模式，也就是傳統的模式 box-sizing: border-box; //邊框模式，設置寬高值（width，height）包括了border在內的范圍。 ``` 內容模式的盒子實際占據寬度為： ``` margin-left + border-left + padding-left + width + padding-right + border-right + margin-right； ``` 邊框模式的盒子實際占據寬度為： ``` margin-left + width + margin-right； ``` 此模式有時候稱為“減模式”，就是實際內容區的寬度，是從設置的寬度（width）減去border和padding 高度方向同理。 * 新的盒模型案例：  ``` <style> /*假設： 1，整體寬度為300x280. 2， 主體灰色邊框線為1px 3，公開課上面的紅色邊框線為2px。 4，頭部區域高度（含邊框線）為40px。 */ .tab{ box-sizing:border-box; width:300px; border:1px solid gray; border-top:none; } ul{ list-style: none; } ul>li{ text-indent: 25px; background:url(images/tubiao.png) no-repeat 0px 0px; } .top{ overflow: hidden;/*清除浮動*/ } .top>.left{ float:left; box-sizing: border-box; height:40px; border-top: solid 2px red; width:50%; line-height: 38px; text-align: center; font-size:18px; color:red; } .top>.right{ float:right; box-sizing: border-box; height:40px; border: solid 1px gray; border-right:none; width:50%; padding-right:15px; line-height: 38px; text-align: right; background:#e0e0e0 } </style> ```