《图解CSS3》学习记录（04-CSS3盒模型）

盒模型的基础内容就不赘述了，主要记录一下项目中用到的属性。

box-sizing：

用来控制盒模型的解析模式，其主要目的时控制元素的总宽度。

content-box：默认值，让元素维持W3C标准的盒模型，即宽高都是值内容（content）区域，至于padding、border和margin都在这个基础上加，也就是元素的实际尺寸总是大于等于设置的尺寸。

border-box：让元素维持IE传统的盒模型，即元素设置的宽高即元素最终的宽高，padding和border都会向内占位，所以内容区域尺寸始终小于等于设置的尺寸。当我们要实现如下布局时，使用border-box模式可能会更加方便：

三列布局

如上图，如果要求总宽度一定，各个列都要固定宽度，而且需要有内边距padding和边框border，这时我们就可以设置这三个元素的box-sizing属性为border-box，直接设置三个栏目的宽度，免去了计算边框和内边距的麻烦（小弟拙见，欢迎各位前辈批评指正）。

还有在元素宽度被设置成100%时，想要添加padding，border-box也能帮上大忙。

inherit：继承父元素的和模型模式。