盒模型是html元素占据空间的物理事实，由内容区、内边距、边框、外边距四部分组成；默认content-box下width仅指内容宽，实际宽=width+左右padding+左右border，如200px宽元素加10px内边距和2px边框后为224px。
盒模型不是“布局技巧”，而是所有HTML元素在页面上占据空间的物理事实。不理解它，Flexbox 和 Grid 的行为就永远像黑箱。
为什么设置 width: 200px 后元素实际宽了 224px
这是默认 box-sizing: content-box 的必然结果：width 只管内容区，padding 和 border 额外叠加。比如：
.box {
width: 200px;
padding: 10px;
border: 2px solid #000;
}
它的实际总宽度 = 200 + 10×2 + 2×2 = 224px。
- 这个计算在响应式断点、媒体查询内缩放时会放大误差
-
max-width和calc()表达式也受此影响，容易超出预期 - 表格单元格、表单控件（如
input）默认就是content-box，混用时极易错位
必须全局加 box-sizing: border-box 的三个理由
不是“建议”，是避免重复踩坑的底线操作。
- 用
* { box-sizing: border-box; }确实简单，但会覆盖 SVG 元素的默认行为；更稳妥的是：html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } - 某些第三方 UI 库（如 Bootstrap 5+）已内置该规则，但若你手动引入重置 CSS，需确认它是否早于库的样式加载
- 当用 JS 动态插入元素（如通过
document.createElement），它们也会继承该规则——否则新元素又回到content-box坑里
display: inline-block 和 flex 在间距处理上的本质区别
两者都能让元素并排，但对空白符（换行/空格）的反应完全不同。
-
inline-block会把 HTML 中的换行符渲染成约 4px 的空白间隙，必须靠注释、负margin或font-size: 0消除 -
flex完全无视 HTML 源码中的空白符，间隙只由gap或margin显式控制 - 如果父容器设了
font-size: 0来压制inline-block间隙，子元素里所有文字都得单独重设font-size，维护成本陡增
Grid 布局中 fr 单位和百分比的混用陷阱
fr 不是百分比，它分配的是剩余空间，不是容器总宽。
- 写
grid-template-columns: 200px 1fr 2fr;是安全的：固定列 + 剩余空间按比例分 - 但写
grid-template-columns: 200px 50% 50%;会出错：百分比基于网格容器宽度，而 50% + 50% 已占满，200px就被强行挤出视口 - 更隐蔽的问题：当用
minmax(0, 1fr)配合overflow: auto时，若内容超长，fr会收缩到 0，导致内容不可见——此时应改用minmax(min-content, 1fr)
盒模型是静态事实，Flex/Grid 是动态策略。前者错了，后者再高级也救不回布局崩塌。很多“响应式失效”问题，追到底都是 box-sizing 没统一，或 padding 被算进 width 导致媒体查询断点偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
