CSS中使用border-box控制padding和border的方法如下：设置box-sizing属性为border-box通过将元素的box-sizing属性设置为border-box，可以让元素的宽度和高度包括内容、内边距（padding）和边框（border），而不是仅包含内容。这样可以更方便地进行布局设计。.element{box-sizing:border-box;}指定宽度和高度在设

CSS 中的 `box-sizing: border-box` 是解决布局错位问题的关键——它让元素的 width 和 height 直接包含 padding 和 border，避免了传统 content-box 模式下尺寸“意外膨胀”的困扰；推荐通过 `* { box-sizing: border-box; }` 全局统一启用，确保 flex、grid 等现代布局中各元素尺寸行为一致、可预测，尤其在混用第三方 UI 库或响应式场景下能显著提升样式稳定性和开发效率。

box-sizing: border-box 是什么

它让元素的 width 和 height 包含 padding 和 border，而不是默认的只算内容区。这是解决“设了 200px 宽，加个 10px padding 就撑到 220px”这类布局错位问题的核心开关。

怎么全局启用 border-box

最稳妥的做法是用通配符重置（注意性能影响极小，现代浏览器已优化）：

* {
  box-sizing: border-box;
}

这样所有元素——包括 input、textarea、button 等原生控件——都会按 border-box 计算尺寸。如果不希望影响某些特殊组件（比如需要精确控制内边距的图标按钮），可以改用更保守的选择器：

• *, *::before, *::after —— 更完整，覆盖伪元素
• html 元素上单独设一次，再用 inherit 向下传递（适合 CSS-in-JS 或 scoped 场景）

为什么不能只对容器设 border-box

因为子元素如果仍用默认的 content-box，你在父容器里用 flex 或 grid 布局时，子项的实际占用宽度会和你写的 width: 33% 不一致——尤其当它们有 padding 或 border 时。常见表现：

• 三列 flex 布局，最后一列换行
• 表格单元格内容溢出或挤压
• 响应式栅格在小屏下错位

所以必须统一，不能“挑着设”。

border-box 对 calc() 和百分比的影响

它不改变 calc() 的计算逻辑，但会让结果更可预测。例如：

.card {
  width: calc(50% - 20px); /* 减去的是 margin，不是 padding */
  padding: 16px;
  border: 1px solid #ccc;
}

在 border-box 下，这个 .card 最终宽度就是 50% - 20px，内部留白由 padding 和 border 挤占内容区；而 content-box 下，最终宽度是 50% - 20px + 34px（16×2 + 1×2），极易失控。

真正容易被忽略的是：某些第三方 UI 库（如早期 Bootstrap 3）默认没设 border-box，如果你项目里混用了它们的 CSS 和自定义样式，务必检查是否被重置覆盖——可以用 DevTools 查看 computed 样式里的 box-sizing 值。

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