盒模型尺寸

在 CSS 中，box-sizing 是一个属性，它决定如何计算元素的总宽度和总高度。默认情况下，width 和 height 属性只包含内容的大小，不包括内边距、边框或外边距。不过，使用 box-sizing 属性可以改变这种行为，让 width 和 height 属性也包含内边距和边框的大小。

这可以简化布局计算，并避免意外的尺寸问题。

以下是使用 box-sizing 属性的基本语法：

selector {
    box-sizing: value;
}

value：所需的盒模型尺寸计算方式，可以是以下值之一：

• content-box：这是默认值。width 和 height 属性只包含内容的大小。内边距、边框和外边距会添加在指定的宽度和高度之外。

• border-box：width 和 height 属性包含内容、内边距和边框的尺寸。外边距仍会添加在元素外部。

例如：

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* 默认行为 */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

在这个示例中，<div> 元素的 box-sizing 值为 content-box。这意味着 <div> 实际渲染的宽度为 300px（内容）+ 40px（左侧和右侧内边距）+ 10px（左侧和右侧边框）= 350px。高度的计算方式类似。

另一方面，类为 container 的元素的 box-sizing 值为 border-box。在这种情况下，指定的 width 值 400px 包含内容、内边距和边框。实际内容区域会缩小，以容纳内边距和边框，因此内容宽度为 400px - 60px（左侧和右侧内边距）- 20px（左侧和右侧边框）= 320px。高度的计算方式类似。