box-sizing

title: box-sizing
date: 2024-11-20 18:13:42
tags: css

前端搭建项目经典开局——调制box-sizing的相关内容

box-sizing: border-box; 是CSS（层叠样式表）中的一个属性，用于改变元素的盒模型（box model）的计算方式。

在CSS中，每个元素都被看作是一个矩形的盒子，这个盒子由以下几部分组成：

• 内容（content）：元素的内容区域，比如文本、图片等。
• 内边距（padding）：内容周围的空白区域，内边距是透明的。
• 边框（border）：围绕在内边距和内容外的边框。
• 外边距（margin）：边框外的空白区域，用来分隔不同的元素。

默认情况下，元素的宽度和高度只包括内容的宽度和高度。这意味着，如果你给一个元素设置了宽度（width）和高度（height），然后又添加了内边距（padding）和边框（border），元素的最终尺寸将会比设置的宽度和高度大，因为它会在原有的宽度和高度基础上再加上内边距和边框的宽度。

当你使用 box-sizing: border-box; 时，情况就不同了。设置 box-sizing: border-box; 后，元素的宽度和高度包括了内容、内边距和边框，但不包括外边距。这意味着元素的最终尺寸就是你所设置的宽度和高度，内边距和边框的宽度会从内容区域中减去，而不是额外增加。

例如：

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

在这个例子中，即使我们添加了内边距和边框，.box 元素的最终尺寸仍然是200px宽和100px高。如果没有设置 box-sizing: border-box;，元素的实际尺寸将会是240px宽（200px宽 + 20px左内边距 + 20px右内边距）和130px高（100px高 + 20px上内边距 + 20px下内边距 + 5px上边框 + 5px下边框）。

box-sizing: border-box; 常用于确保元素在不同浏览器中的一致性和可预测性，特别是在响应式设计中。很多前端开发者会将其应用到全局的 * 选择器上，以简化布局的计算：

* {
  box-sizing: border-box;
}