神奇的box-sizing——不同类型的盒模型

神奇的box-sizing——不同类型的盒模型

标准盒模型：

为元素设置box-sizing属性的不同值，会有不同的盒模型来体现：

box-sizing可取的值为：

• content-box：width = contentWidth
• border-box：width = margin-right + border-width + padding-left + contentWidth + padding-right + border-width + margin-right
• inherit：继承父元素

看个简单的例子：

    <style>
        div {
            width: 100px;
            height: 100px;
            border: 5px solid #ccc;
            padding: 10px;
            margin: 10px;
        }
        .div1 {
            box-sizing: border-box;
        }
        .div2 {
            box-sizing: content-box;
        }
    </style>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>

.div3是默认的，主要比较前两个的区别：

• .div1：这100的宽高 = margin + border-width + padding + 内容宽高
• .div2：这100的宽高 = 内容宽高，margin、border-width、padding的宽高都在内容之外展开绘制

适用情况：

如果需要内容宽高固定，那么使用box-sizing : content-box;（默认就是）

如果需要盒模型宽高固定，那么使用box-sizing：border-box;

如果继承父元素，那么使用box-sizing：inherit;

举例：

比如我觉得内容距离边框太近了，但我并不想改变整体的大小，我们就可以使用box-sizing:border-box;然后添加padding。