CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,其属性值有两种:
- content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型
- border-box:怪异盒模型,低版本IE浏览器中的盒模型
现代浏览器和IE9+默认值是content-box。
区别:
content-box:padding和border不被包含在定义的width和height之内。
盒子的实际宽度 = 设置的width + padding + border
border-box:padding和border被包含在定义的width和height之内。
盒子的实际宽度 = 设置的width(padding和border不会影响实际宽度)
在IE中(也就是怪异模式),块元素的width = content + padding + border;比如设定元素width = 100px,padding = 10px,那么实际的内容区域宽度为100-10*2px,也就是固定宽度后,如果设定border或者padding会压缩内容区的宽度;
在W3C标准中,元素的width = content,比如设定元素width = 100px,padding = 10px,那么实际内容宽度就为100px;整个元素的宽度为100+10*2px,也就是设定额外的padding或border会向外扩张元素的大小;
在实际的开发中,为保持浏览器的兼容性,通常将盒子模型统一为IE的盒子模型,并且这样的方式有利于布局。
<!DOCTYPE html>
<html>
<head>
<style>
div.box{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:300px;
border:10px solid red;
}
div.box1{
width:300px;
border:10px solid red;
padding: 10px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box">box 实际宽度为300px</div>
<div class="box1">box1 实际宽度为340px</div>
</body>
</html>