box-sizing属性是css3中新添加的属性,用来替换原来的css盒子模型,box-sizing属性值的不同,元素的高度和宽度的计算方法也不同。
/* box-sizing的三个属性值,我们只针对前两个说明 */
box-sizing: content-box;
box-sizing: border-box;
box-sizing: padding-box;
在默认情况下,设置的width
和height
属性都是指元素内容(content box)的高度和宽度,如果这个元素设置了border
或padding
的话,那么整个元素的高度和宽度就是:
totalWidth = border-left + padding-left + width + padding-right + border-right
totalHeight = border-top + padding-top + height + padding-bottom + border-bottom
所以,这个在做相应式设计的时候还是比较复杂的,现在,有了box-sizing属性,就可以根据不同的属性值计算元素的高度和宽度。
-
content-box
:这是默认情况,根据这个属性值的名字也能大概猜出会是什么情况,整个元素的高度和宽度其实就是上面的两个公式 -
border-box
:这种情况下,你设置的width
和height
属性值就是针对整个元素,包括了border,padding,和元素内容。
简单的例子
CSS
.box {
width: 150px;
height: 150px;
padding: 50px;
border: 5px solid blue;
background-color: orange;
}
.box1 {
box-sizing: content-box;
}
.box2 {
box-sizing: border-box;
}
HTML
<div class="box box1">
content-box
</div>
<div class="box box2">
border-box
</div>
代码中,我们对两个div设置了相同的height、width、border和padding,可是现实效果却完全不同:
我们仔细分析下,两个div不同的地方在于box-sizing属性,第一个是content-box
,第二个是border-box
,针对第一个div,
我们发现,整个元素的高度和宽度是260x260,而元素的内容的高度和宽度是150x150,正好是我们想要的,对于260这个大小是怎么来的,我们不妨计算一下:
5+50+150+50+5=260 // 高度
5+50+150+50+5=260 // 宽度
正好是260,符合最上面的两个公式,所以最后元素的尺寸是260x260,并不是我们设置的150x150
对于第二个div:
很明显可以看到,第二个div里面的内容已经被挤了换行了,这个div的真实的高度和宽度和我们设置的一样,可以它的内容部分的尺寸只有40x40,远小于150,可以看到,这就是content-box
和border-box
的区别了,再来计算一下:
150 = 5+50+40+50+5 // 高度
150 = 5+50+40+50+5 // 宽度
可知,整个元素的高度其实是包括了border、padding和内容的高度,宽度也是如此。
浏览器的兼容性
- 桌面端
- 手机端
可以看到,不管是手机端还是桌面端大部分都是不支持padding-box
的,所以建议实际开发中避免使用padding-box
。
跟多详细内容请参考:https://developer.mozilla.org...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。