box-sizing属性详解及使用技巧

`box-sizing` 属性是 CSS 中控制元素盒模型计算方式的关键属性，决定了元素的 `width` 和 `height` 属性如何计算。它主要有两个取值：`content-box`（默认值）和 `border-box`。`content-box` 模式下，元素的宽高仅包含内容区域，`padding` 和 `border` 不计入；而 `border-box` 模式下，元素的宽高则包含内容、`padding` 和 `border`，更易于进行精确的尺寸控制，尤其是在响应式设计、Grid 和 Flexbox 布局中。推荐全局设置为 `border-box` 以提升布局的可预测性，配合 `calc()` 函数使用可实现更精细的尺寸控制。同时，JavaScript 的 `offsetWidth` 和 `offsetHeight` 也会受到 `box-sizing` 属性的影响，返回相应的总尺寸。掌握 `box-sizing` 的用法对于前端开发至关重要。

box-sizing 属性决定元素宽高是否包含 padding 和 border，其主要值为 content-box（默认，宽高仅含内容，实际尺寸需加上 padding 和 border）和 border-box（宽高包含内容、padding 和 border，更利于布局控制），推荐全局设置为 border-box 以提升布局可预测性，尤其在响应式、Grid 和 Flexbox 布局中优势明显，且与 calc() 配合可精确控制尺寸，JavaScript 的 offsetWidth/Height 会受其影响返回对应总尺寸。

box-sizing 属性决定了如何计算一个元素的总宽度和高度。 简单来说，它控制着 width 和 height 属性包含哪些部分。

解决方案

box-sizing 属性有两个主要的值：content-box 和 border-box。

• content-box (默认值): 元素的 width 和 height 只包含内容区域，不包括 padding、border 和 margin。 也就是说，元素的实际宽度和高度是 width + padding + border。 这经常会导致一些布局上的困扰，尤其是当你在设置固定宽度时，添加 padding 和 border 会超出预期。

• border-box: 元素的 width 和 height 包含内容区域、padding 和 border，但不包括 margin。 这意味着你设置的 width 就是元素的总宽度，padding 和 border 会在内容区域内部进行调整。 这使得布局更加可控，因为你不需要手动计算 padding 和 border 所占用的空间。

  

举个例子：

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
}

.content-box {
  box-sizing: content-box; /* 默认值，可以省略 */
}

.border-box {
  box-sizing: border-box;
}

对于 .content-box，它的实际宽度是 200px + 20px * 2 + 5px * 2 = 250px，高度是 100px + 20px * 2 + 5px * 2 = 150px。

对于 .border-box，它的实际宽度就是 200px，高度就是 100px。 padding 和 border 会挤压内容区域的空间。

什么时候应该使用 border-box？

几乎所有时候！ border-box 使得布局更加直观和易于管理。 通常，我们会使用以下 CSS 重置来将所有元素的 box-sizing 设置为 border-box：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

这种做法的原理是：先在 html 元素上设置 box-sizing: border-box;，然后让所有元素继承这个属性。 这样，你就可以在全局范围内使用 border-box 布局模型。

为什么 content-box 是默认值？

这是一个历史遗留问题。 在 CSS 规范的早期，content-box 是唯一可用的模型。 后来，border-box 被引入，但为了保持向后兼容性，content-box 仍然是默认值。 这就像为什么很多编程语言的数组索引从 0 开始一样，虽然可能不是最理想的设计，但改变它会破坏大量的现有代码。

box-sizing 对响应式设计有什么影响？

border-box 在响应式设计中尤其有用。 当你在创建灵活的布局时，使用 border-box 可以更容易地控制元素的尺寸，避免因为 padding 和 border 导致元素超出容器。 例如，你可以设置元素的宽度为 50%，然后添加 padding 和 border，而不用担心元素会超出父元素的宽度。

box-sizing 和 calc() 函数一起使用有什么技巧？

calc() 函数允许你在 CSS 中进行简单的数学运算。 当你在使用 border-box 时，calc() 可以帮助你更精确地控制元素的尺寸。 例如，你可以设置元素的宽度为 calc(100% - 20px)，然后添加 10px 的 padding，元素的总宽度仍然是父元素的 100%。

.container {
  width: 300px;
}

.item {
  width: calc(100% - 20px); /* 宽度是父元素的 100% 减去 20px */
  padding: 10px;
  box-sizing: border-box; /* 包含 padding */
}

在这个例子中，.item 的内容区域的宽度会自动调整，以适应 padding 的空间，最终 .item 的总宽度仍然是 280px，即父元素的 100% - 20px。

box-sizing 会影响 JavaScript 获取元素尺寸吗？

会影响。 offsetWidth 和 offsetHeight 属性会返回元素的总宽度和高度，包括 padding、border 和滚动条（如果存在）。 因此，如果元素的 box-sizing 设置为 border-box，offsetWidth 和 offsetHeight 会返回你设置的 width 和 height。 如果 box-sizing 设置为 content-box，offsetWidth 和 offsetHeight 会返回 width + padding + border。 这在编写 JavaScript 代码时需要注意，特别是当你需要根据元素的尺寸进行一些计算时。

box-sizing 和 CSS Grid 布局有什么关系？

border-box 和 CSS Grid 布局配合使用可以简化很多复杂的布局问题。 例如，你可以使用 fr 单位来创建等分的列，然后为每个列添加 padding 和 border，而不用担心它们会破坏等分的效果。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建 3 列等宽的列 */
  gap: 10px; /* 列之间的间距 */
}

.grid-item {
  padding: 20px;
  border: 1px solid black;
  box-sizing: border-box; /* 包含 padding 和 border */
}

在这个例子中，每一列的宽度都是父元素的 1/3，padding 和 border 会在列内部进行调整，不会影响列的总宽度。

box-sizing 和 CSS Flexbox 布局有什么关系？

和 Grid 类似，border-box 也能让 Flexbox 布局更加可预测。 例如，你可以设置 Flexbox 元素的 flex-basis 属性，然后添加 padding 和 border，而不用担心元素会超出容器。

.flex-container {
  display: flex;
}

.flex-item {
  flex-basis: 33.33%; /* 占据 1/3 的空间 */
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* 包含 padding 和 border */
}

同样，每个 Flexbox 元素的宽度都是父元素的 1/3，padding 和 border 不会影响元素的总宽度。

今天关于《box-sizing属性详解及使用技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于布局,content-box,box-sizing,border-box,CSSBoxModel的内容请关注golang学习网公众号！