CSS3的box-sizing属性

时间:2024-10-19 10:03:44

盒模型的宽度,在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内

W3C标准中的盒模型宽度为内容宽度,不包括内边距padding和边框border

CSS3 的box-sizing属性

共有三个值:content-box    padding-box   border-box

content-box与以前的W3C标准对盒模型的处理一样

padding-box在指定width时会把padding计算在内

border-box在指定width时,会把border和padding计算在内

<title>无标题文档</title>
<style type="text/css">
#div1{
width:100px;
height:100px;
padding:20px;
border: 5px solid #E6A43F;
background-color:red;
}
#div2{
box-sizing:padding-box;
width:100px;
height:100px;
padding:20px;
border: 5px solid #E6A43F;
background-color:blue;
}
#div3{
box-sizing:border-box;
width:100px;
height:100px;
padding:20px;
border: 5px solid #E6A43F;
background-color:yellow;
}
</style>
</head> <body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>

CSS3的box-sizing属性

目前这个属性的使用需要加上特定浏览器的前缀,测试了一下,火狐支持该属性,不需要加前缀