浅谈css3的box-sizing属性

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>

浅谈css3的box-sizing属性

猜你喜欢