box-sizing 默认值为 content-box，导致 width 仅控制 content 区域，padding 和 border 额外撑宽容器，引发布局溢出；border-box 才符合多数人直觉，width 指总宽。
box-sizing 默认值为什么让宽度计算反直觉
因为 width 默认只控制 content 区域，padding 和 border 会额外撑开容器——你设 width: 200px，加个 padding: 10px 后实际占宽就是 220px。这不是 bug，是 W3C 定义的「标准盒模型」行为。
- 浏览器默认使用
box-sizing: content-box，所有现代浏览器一致 - 只要涉及固定宽度布局（比如栅格列、表单控件、卡片），不改这个就容易溢出或错位
-
box-sizing: border-box才是多数人真正想要的：width指的是“最外边框总宽”，padding 和 border 往里缩 - 全局重置推荐写法：
* { box-sizing: border-box; }，但注意它不继承，且会影响<input>、<button></button>等原生控件的默认表现（某些旧版 Safari 对border-box下的textarea高度计算有偏差）
margin 折叠只发生在块级元素的垂直方向
两个相邻 <div> 的 <code>margin-bottom 和 margin-top 会合并成一个 margin，取两者较大值；但水平方向的 margin-left/margin-right 永远相加，不会折叠。
- 折叠只对「普通文档流中的块级盒子」生效，浮动、绝对定位、inline-block、flex item 都不参与
- 父元素没有 border/padding，且第一个/最后一个子元素的 margin 会“冒出去”（称为外边距塌陷），导致父容器高度塌陷或上下间距失控
- 常见解法不是加
padding: 1px这种 hack，而是触发 BFC：比如给父元素加overflow: hidden或display: flow-root - Flex/Grid 容器内部子项完全不发生 margin 折叠——这也是为什么一上 Flex 布局，很多老问题自动消失
padding 不能为负值，但可以影响 background 绘制范围
padding 只接受非负数值，设成负数会被浏览器忽略（解析为 0）。但它直接决定 background-color 和 background-image 的填充区域——背景始终铺满 content + padding 区域，但不包括 border 和 margin。
- 如果用
background-clip，可以改变这个行为：background-clip: content-box让背景只画在 content 内；background-clip: padding-box（默认）画到 padding 边；background-clip: border-box会铺满 border 下方（但 border 本身是透明的，所以通常看不出区别） - 当需要「内容内凹、背景外延」效果时（比如带描边的文字卡片），靠 padding + background-clip 组合比用伪元素更轻量
- 注意：rem/vw 单位的 padding 在视口缩放或根字体变化时会响应式重算，但 percentage padding 是相对于父容器 width 计算的（即使写在 height 上）——这点常被误用
border-width 为 0 时仍占渲染空间？不一定
当 border-width: 0 且 border-style 是 none 时，border 彻底不渲染、不占空间；但如果 border-style 是 solid 或 dashed，哪怕 border-width: 0，部分浏览器（如旧版 Chrome）仍会保留 border 盒子的占位逻辑，导致 layout shift。
立即学习“前端免费学习笔记（深入）”；
- 安全写法永远是同时设
border: 0或border: none，而不是只写border-width: 0 -
border-collapse: collapse在表格中会让相邻 border 合并，此时单个 cell 的border设置可能被覆盖，调试时得看 computed style 而不是声明值 - 用
outline替代border实现焦点样式时，要注意 outline 不参与盒模型计算，也不会触发重排，但无法做圆角或单独控制某一边
盒模型看着简单，但 content/padding/border/margin 四层之间没有「隔离墙」——任何一层的改动都可能通过折叠、继承、BFC 触发、绘制范围等隐性机制，影响其他层的表现。调样式时盯着 computed tab 比死磕声明更管用。
