转载地址:https://www.cnblogs.com/paul-myweb/p/5250382.html
box-sizing是css3的新属性,关于这个属性,官方的解释是 :“box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。” 这个解释对于新使用box-sizing 的人或许不是很好理解。要理解这个属性,还得从css的盒子模型说起。
说到css的盒子模型,大家都不会陌生。首先,盒子模型本身有两种模式:标准模式和怪异模式。关于标准模式和怪异模式的解释,在这里不多述说了。下面我们用div定义的“盒子”来理解这两种模式之间的差异。
标准模式:
在标准模式下的盒模型如下图所示,盒子总宽度/高度=width/height+padding+border+margin
我们定义一个div:
.box{
width:100px;
height:100px;
border:10px #ddd solid;
padding:10px;
margin:10px;
}
在chrome浏览器下解析是这样的:
此时,box的width/height 实际上不包含padding和border,即box内容区的宽/高 = 100px;此时,是标准模式的盒模型
怪异模式
在怪异模式下的盒模型如下图所示,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
也即是说 width = 内容区宽度 + padding + border
如果加上box-sizing:border-box
.box{
width:100px;
height:100px;
border:10px #ddd solid;
padding:10px;
margin:10px;
box-sizing:border-box;
}
此时,box的width/height 实际上包含了padding和border,即box内容区的宽/高 = 60px; 此时,是怪异模式的盒模型。
box-sizing的主要属性有两种:border-box和content-box,默认情况下,浏览器是按content-box即标准模式解析盒模型的,上面第一种情况即是。如果定义了box-sizing:border-box;浏览器就会以怪异模式解析盒子模型了
box-sizing是css3的属性,对于我们css盒子模型的兼容问题提供了很好的帮助,更可喜的是,连我们的IE8也支持了这一属性。
CSS3的box-sizing属性
语法:
box-sizing : content-box || border-box || inherit;
在css3中新增了box-sizing属性,具备了以上知识后,我们已经理解:
- 当为content-box时,将采取标准模式进行解析计算
- 当为border-box时,将采取怪异模式解析计算
- 当为inherit时,将从父元素来继承box-sizing属性的值