html5 box sizing,21.5.盒子模型box-sizing

* 含义：

所谓盒子模型，是指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

高度方向同理。

* 新的盒模型案例：


```

/*假设：

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

}

```