* 含义： 所谓盒子模型，是指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> ```