正在加载...

CSS Box Sizing

你已经知道 padding 和 border 可能让盒子比声明的 width 更大。box-sizing 选择这套算法的规则：width 是指「只有 content」，还是「content + padding + border」？

两种模型一览

📊 content-box 与 border-box

模型 width / height 覆盖什么 日常效果
content-box（默认） 仅 content Padding 与 border 加在声明尺寸外侧
border-box content + padding + border 声明尺寸是外层 border 边；content 缩小以塞进
Margin 两者都不包含 外侧空隙仍与 box-sizing 无关

默认：content-box

在默认模型下，width: 200px 量的是 content。加上 padding 和 border，涂色盒子会变大。

Content-box（默认）

css
CSS Code 
.panel-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #ccfbf1;
}
/* content 200px + padding + border → 总宽更大 */

切换到 border-box

使用 border-box 时，同样的 width: 200px 包含 padding 与 border。外缘更接近 200px；content 区域变小。

Border-box 尺寸

css
CSS Code 
.panel-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #99f6e4;
}
/* 外层 border 盒瞄准 200px；content 缩小 */

同样的数字，不同的占地

把两种模型用相同的 width、padding、border 并排放。

对比两种模型

css
CSS Code 
.contenty {
box-sizing: content-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fef3c7;
}

.borderish {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* 声明相同；.contenty 占更多水平空间 */

团队为何喜欢 border-box

当卡片必须刚好填满一列 — 例如带 padding 的 width: 100% — border-box 能避免卡片从父级溢出。

对列友好的卡片

css
CSS Code 
.card {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
}

稳妥的全局习惯

许多样式表会一次性给所有元素设 border-box，让日常宽度算法可预期。Margin 仍然在外侧。

通用 border-box 习惯

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

自己动手

  1. 在 content-box 下用 width: 200px、padding 和 border 做 .panel-content。
  2. 复制为带 box-sizing: border-box 的 .panel-border — 看外尺寸靠近 200px。
  3. 用相同数字并排放 .contenty 与 .borderish。
  4. 做一张带 padding 的 width: 100% 卡片；切换 box-sizing，看谁溢出。
  5. 在小演示页试用通用 * 习惯。

常见错误

  • 以为 border-box 也包含 margin（不包含）
  • 忘记默认是 content-box，直到你改掉它
  • 指望 outline 跟随 box-sizing（outline 仍在外侧，且仍不占布局空间）
  • 在 content-box 下写带厚 padding 的 width: 100%，却惊讶会溢出
  • 不知道当前是哪种尺寸模型就混用百分比

小结

  • 默认 box-sizing: content-box 量 content；padding 与 border 再往外加
  • border-box 把 padding 与 border 收进声明的宽高
  • Margin 在两种模型之外
  • Border-box 常常让列宽和 width: 100% 卡片更好算
  • 通用 border-box 重置是常见、稳妥的习惯

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程