box-sizing 默认为 content-box，width/height 仅指内容区，实际宽高含 padding 和 border；应全局设为 border-box；margin 合并仅发生于常规流中相邻块级盒之间；padding 不能为负但 background-clip 可控背景绘制范围；border-width: 0 需配合 style 才生效。
box-sizing 默认值是 content-box，不是你直觉想的“整个盒子”
浏览器默认把 width 和 height 解释为内容区域的尺寸，不包含 padding、border，更不包含 margin。这意味着写 width: 200px; padding: 10px; border: 2px solid;，元素实际占位宽度是 200 + 10×2 + 2×2 = 224px —— 很容易撑破父容器或破坏栅格对齐。
解决办法是统一设为 box-sizing: border-box;，这样 width 就真指“边框边缘总宽”，padding 和 border 会向内压缩内容区。推荐在全局重置中加上：
* {
box-sizing: border-box;
}注意：* 选择器性能略低，生产环境可用 html { box-sizing: border-box; } + *, *::before, *::after { box-sizing: inherit; } 替代。
margin 不会合并？只在块级常规流中发生
margin 合并（collapsing）常被误认为“bug”，其实是 CSS 规范明确定义的行为：相邻块级元素的垂直 margin 会取较大者，而不是相加。但这个规则有严格前提：
立即学习“前端免费学习笔记（深入）”；
- 必须是处于**常规文档流**中的**块级盒**（
display: block） - 必须是**兄弟关系**或**父子关系**（父元素无
border/padding/inline content隔开） -
flex、grid、float、position: absolute容器内的子元素，margin不会合并 - 空块级元素自身上下
margin也会合并成一个
调试时如果发现 margin-top: 20px 没生效，先检查父元素有没有 padding-top 或 border-top —— 一旦存在，父子 margin 就不会合并，此时你的 margin 是真实起作用的；反之，没隔断就可能被“吞掉”了。
padding 不能为负，但 background-clip 可以让背景“躲开”它
padding 值只接受 0 或正数，负值无效。但它直接影响背景绘制区域。默认 background-clip: border-box，即背景铺满到边框外沿；若改成 background-clip: content-box，背景就只画在内容区，padding 区域透明 —— 这在做内凹阴影、文字底色不延伸到内边距时很实用。
常见组合：
.card {
padding: 20px;
background-color: #f5f5f5;
background-clip: content-box; /* 背景不覆盖 padding 区 */
border: 1px solid #ddd;
}注意：background-clip 不影响 border 渲染位置，只裁剪背景；若同时用 background-origin，要小心两者的叠加效果。
border-width 为 0 时仍占渲染空间？不一定
border-width: 0 在大多数情况下等价于无边框，但有例外：当使用 border-style: solid 且 border-width: 0 时，部分旧版浏览器（如 IE8）仍会保留边框的“占位逻辑”。更稳妥的做法是直接省略 border-style，或显式设为 border: none。
另外，border 的三个组成部分（width、style、color）缺一不可才生效：border-width: 2px 单独写不会显示边框，因为缺少 style；border-color: red 单独写也不会，因为 style 默认是 none。
快速清边框的写法优先级：
- 彻底清除：
border: none（推荐） - 仅清某一边：
border-left: 0或border-left: none - 避免意外继承：
border: initial（重置为 UA 默认值，通常是none）
盒模型真正难的不是概念，而是各种属性在不同上下文中的隐式交互 —— 比如 overflow 对 padding 内容裁剪的影响，或者 transform 如何让元素脱离文档流从而改变 margin 行为。这些细节不查 MDN 很难靠经验覆盖全。
