对css3中box-sizing属性的理解

用法简介

box-sizing属性主要的取值有content-box,border-box和inherit,今天主要对前两者进行区别

image.png

一般浏览器默认设置为content-box,就是我们平常使用的符合w3c标准的盒模型,设置的宽高仅仅是内容的宽高,整个div的宽度(BoxWidth)可以总结: BoxWidth = width+padding+border,当我们想设置一个固定宽高的盒子,就必须算出内容所占的宽度和高度,使用width和height设置即可,可见使用content-box很麻烦。
但border-box就有所不同了,它给我们带来了便利,当我们设置后,我们就不必进行计算,要想设置多大的盒子,我们直接使用width和height设置即可,最后内容的大小浏览器会自动呈现。width = contentWidth+padding+border。

浏览器支持情况

image.png

现阶段大多数浏览器都支持box-sizing属性,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-。

到此box-sizing属性就介绍完毕了

推荐阅读更多精彩内容