box-sizing: border-box的用法和作用

box-sizing 是一个 CSS 属性，box-sizing: border-box 是它的一个常用取值，它主要用于控制元素的盒模型尺寸计算方式。下面为你详细解释其作用、原理以及和默认值的对比。

盒模型基础

在理解 box-sizing: border-box 之前，需要先了解 CSS 盒模型。盒模型由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。元素的实际宽度和高度由这些部分共同决定。

box-sizing 属性取值

• content-box（默认值）：当 box-sizing 为 content-box 时，元素的宽度和高度只包含内容区（content）的大小。设置的 width 和 height 属性值仅作用于内容区，内边距（padding）和边框（border）会在内容区的基础上向外扩展，从而增加元素的整体尺寸。例如，设置一个元素的 width: 200px，如果再给它添加 10px 的内边距和 2px 的边框，那么该元素在页面上实际占据的宽度将变为 200 + 10 * 2 + 2 * 2 = 224px。
• border-box：当 box-sizing 设置为 border-box 时，元素的宽度和高度包含了内容区（content）、内边距（padding）和边框（border）。也就是说，设置的 width 和 height 属性值是元素包含内边距和边框在内的总尺寸。例如，设置一个元素的 width: 200px，再给它添加 10px 的内边距和 2px 的边框，内容区的宽度会自动调整为 200 - 10 * 2 - 2 * 2 = 176px，元素在页面上实际占据的宽度依然是 200px。

box-sizing: border-box 的作用

• 简化布局计算：在进行页面布局时，使用 box-sizing: border-box 可以让元素的尺寸更加直观和易于控制。开发者只需关注元素的总宽度和高度，而不必担心内边距和边框会影响元素的实际尺寸。
• 避免布局混乱：在多列布局或嵌套元素的情况下，如果使用默认的 content-box，内边距和边框可能会导致元素超出预期的布局范围，从而破坏整体布局。使用 box-sizing: border-box 可以有效避免这种问题。