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,如下图所示
box-sizing默认取值为content-box,所有属性值不变,则盒子尺寸变为下图所示
浏览器兼容性
IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOS和Android浏览器也需要加上-webkit-。