CSS设置border-box包含padding和border的方法

**CSS元素宽度计算：`box-sizing: border-box`的妙用** 在CSS布局中，元素宽度计算是关键。默认的CSS盒模型（`content-box`）只将内容区域计入`width`，导致`padding`和`border`会额外增加元素实际宽度，容易造成布局错位。想要更精准地控制元素宽度，`box-sizing: border-box`是最佳选择。通过设置`box-sizing`为`border-box`，元素的`width`属性将包含内容、内边距和边框的总宽度，使布局更加直观可控，尤其适用于栅格系统。建议在全局样式中统一设置`box-sizing: border-box`，避免因盒模型计算差异导致的布局问题，提升代码可维护性。

默认情况下CSS盒模型width仅包含内容，使用box-sizing: border-box可使width包含padding和border，推荐全局设置以统一布局计算，避免错位，提升可维护性。

在CSS中，默认情况下元素的宽度（width）只包含内容区域，不包括padding和border。这意味着当你设置一个元素的宽度为200px时，实际占用的空间会更大，如果加上了padding或border的话。

box-sizing: content-box（默认行为）

• 设置的 width = 内容宽度
• padding 和 border 会额外增加元素总宽度
• 例如：width: 200px; padding: 10px; border: 5px solid;
• 实际宽度 = 200 + 2×10 + 2×5 = 230px

box-sizing: border-box（推荐用于精确控制）

• 设置的 width = 内容 + padding + border 的总宽度
• 更直观地控制布局，尤其在栅格系统中非常有用
• 例如：width: 200px; padding: 10px; border: 5px solid;
• 实际宽度就是 200px，内容区域会被压缩为 170px

如何启用：只需添加以下CSS：

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

建议在全局重置样式中统一设置：

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

这样可以避免大多数因盒模型计算导致的布局错位问题。基本上就这些，合理使用 box-sizing 能让你的布局更 predictable 和易于维护。不复杂但容易忽略。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~