CSS3 box-sizing 属性

CSS3 box-sizing 属性

CSS3 box-sizing 属性允许您定义某个元素的CSS框模型应该如何计算其宽度和高度。通过设置 box-sizing 属性，您可以改变元素如何在浏览器中计算它们的大小。

语法

box-sizing: content-box | border-box | inherit;

可选值

• content-box：默认值。元素的宽度和高度只包括内容的宽度和高度，不包含边框（border）和内边距（padding）。
• border-box：元素的宽度和高度包括内容、内边距和边框的总宽度和高度。
• inherit：继承父元素的 box-sizing 属性的值。

用法

对于一个带有内部填充和边框的 div 元素，其默认 box-sizing 值为 content-box。以下是一个示例：

<div>
    <h2>Hello World</h2>
    <p>这是一个段落</p>
</div>

div {
    width: 200px;
    border: 10px solid #000;
    padding: 20px;
    margin: 20px;
}

这个 div 元素具有以下CSS框模型：

宽度 = 内容宽度（h2和p）+ 2 * padding（20px）+ 2 * border（10px）= 280px
高度 = 内容高度（h2和p）+ 2 * padding（20px）+ 2 * border（10px）= 200px

如果为该元素设置 box-sizing: border-box，则元素的宽度和高度将包括其内部填充和边框。以下是一个示例：

<div class="border-box">
    <h2>Hello World</h2>
    <p>这是一个段落</p>
</div>

.border-box {
    width: 200px;
    border: 10px solid #000;
    padding: 20px;
    margin: 20px;
    box-sizing: border-box;
}

这个 div 具有以下CSS框模型：

宽度 = 200px（已设置为元素宽度） 
高度 = 200px（已设置为元素高度）

总结

通过使用 box-sizing 属性，您可以控制CSS框模型的计算方式，使您更加方便地设计和排版您的网页。默认情况下，元素的 box-sizing 值为 content-box。但是，通过将 box-sizing 值设置为 border-box，您可以轻松将元素的宽度和高度设置为包括其内部填充和边框。这可以让您更加轻松地设计一个响应式布局。