盒模型的基础内容就不赘述了，主要记录一下项目中用到的属性。
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：继承父元素的和模型模式。
网友评论