HTML | DOM 样式 boxSizing 属性

简介

boxSizing 属性是用来设置元素的盒模型的 sizing 类型的属性，它决定了元素的内边距和边框是否计算在元素的宽度和高度中。boxSizing 属性有两个值：content-box 和 border-box。

当设置为 content-box 时，元素的宽度和高度不包括内边距和边框。当设置为 border-box 时，元素的宽度和高度包括内边距和边框。

语法

selector {
    box-sizing: content-box|border-box|inherit;
}

• content-box: 元素的宽度和高度不包括内边距和边框。
• border-box: 元素的宽度和高度包括内边距和边框。
• inherit: 规定应从父元素继承 box-sizing 属性的值。

示例

下面的示例演示了 boxSizing 属性的作用。

<style>
    #box1 {
        width: 200px;
        height: 100px;
        padding: 10px;
        border: 10px solid red;
        box-sizing: content-box;
    }

    #box2 {
        width: 200px;
        height: 100px;
        padding: 10px;
        border: 10px solid red;
        box-sizing: border-box;
    }
</style>

<div id="box1">box-sizing: content-box;</div>
<div id="box2" style="margin-top: 20px;">box-sizing: border-box;</div>

上述代码将生成两个 div 元素，它们的样式分别为 content-box 和 border-box。第一个 div 元素的宽度和高度不包括内边距和边框；第二个 div 元素的宽度和高度包括内边距和边框。

总结

boxSizing 属性是一个比较实用的属性，可以方便地控制元素的盒模型大小。在一些响应式设计中，使用 border-box 可以使得元素更加灵活，可以更方便地根据不同的视口大小调整元素的样式，而不会出现盒模型大小出现异常的问题。