CSS3中盒子模型的类型

由下图可以看出，CSS中的盒子模型由content(内容)、padding(内边距)、border(边框)和margin(外边距)四部分组成。

而CSS3中的盒子模型包括content-box、border-box和inherit三种形式。

1.box-sizing:content-box

content-box为标准模式的盒子模型，也是box-sizing属性的默认值。padding和border的设置会影响盒子整体的大小。

.tx{
            width: 400px;
            height: 300px;
            padding: 0 10px;
            border: 1px solid black;
        }

此时，盒子实际的宽为400+20+2，高为300+0+2，蓝色部分的宽高为400*300。

如果想盒子的宽度为400*300,则需要在设置padding和border的时候对width、height的值也进行变化。

.tx{
            width: 378px;
            height: 298px;
            padding: 0 10px;
            border: 1px solid black;
        }

2.box-sizing:border-box

border-box为怪异模式的盒子模型，与content-box不同的是，在该模式下padding和border不会对盒子的实际宽高产生影响，而是已经算在里面了。

.tx{
            box-sizing: border-box;
            width: 400px;
            height: 300px;
            padding: 0 10px;
            border: 1px solid black;
        }

3.box-sizing:inherit

从父元素继承该属性的值。