在css中如何用box-sizing控制盒模型

box-sizing用于控制元素宽高计算方式，content-box（默认）宽高不包含padding和border，实际尺寸会更大；border-box则包含padding和border，确保设置的宽高即总占用空间。当元素宽100%加padding时，content-box会导致溢出，而border-box可避免此问题。推荐全局设置*{box-sizing:border-box}以统一模型，使布局更可控、 predictable。

在CSS中，box-sizing 属性用于控制元素的盒模型计算方式，它决定了 width 和 height 是包含内容、内边距（padding）和边框（border），还是仅指内容区域。正确使用 box-sizing 能避免布局中的尺寸计算问题。

box-sizing 的取值

box-sizing 有两个常用值：

• content-box：默认值。width 和 height 只包括内容区域，不包含 padding 和 border。实际占用空间 = width/height + padding + border
• border-box：width 和 height 包括内容、padding 和 border。设置后，元素的总宽高不会因为 padding 或 border 而变大。

使用 box-sizing 解决布局问题

常见问题：给一个宽度为100%的元素添加 padding 后，实际宽度超过父容器。

例如：

立即学习“前端免费学习笔记（深入）”；

.box {
  width: 100%;
  padding: 20px;
  border: 5px solid #ccc;
}

使用 content-box 时，这个元素的实际宽度是 100% + 40px (左右padding) + 10px (左右border)，会溢出父容器。

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

115

查看详情

解决方法：使用 border-box

.box {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  border: 5px solid #ccc;
}

此时 width: 100% 已包含 padding 和 border，内容区域会自动压缩，整体不会超出父容器。

推荐全局设置

为避免每个元素都要单独设置，建议在 CSS 重置或初始化样式中统一应用：

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

这样所有元素都采用 border-box 模型，布局更直观可控。

基本上就这些。合理使用 box-sizing 能让页面布局更 predictable，减少意外的溢出或错位问题。

以上就是在css中如何用box-sizing控制盒模型的详细内容，更多请关注php中文网其它相关文章！