css3中的box-sizing属性

yezi 2019-06-26

盒子宽度、高度计算公式:
css元素宽度 = width + padding + border
css元素高度 = height + padding + border

css3之前,当我们需要呈现一个宽度为200px的盒子时,我们需要减去它本身的内边距、边框,然后得知属性的width应该设置为多少。例如:padding为20px, border为3px,那么width=200-202-32=154px


css3中的box-sizing属性帮我们很方便的解决了上述问题:

语法:box-sizing: content-box | border-box | inherit;

要解决上面例子中的问题,只需设置box-sizing:border-box,width:200px,如下图所示

css3中的box-sizing属性

box-sizing默认取值为content-box,所有属性值不变,则盒子尺寸变为下图所示

css3中的box-sizing属性


浏览器兼容性

IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOS和Android浏览器也需要加上-webkit-。

相关推荐