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