默认情况下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 包含 content + padding + border：

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

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

算家云

高效、便捷的人工智能算力服务平台

37

查看详情

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

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

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

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