box-sizing: border-box使width/height直接等于元素最终占位尺寸，包含padding和border，避免content-box下因额外叠加导致的布局错位、溢出与换行。
div 默认尺寸怎么算
不设 width 和 height 的 div，宽度默认撑满父容器（100%），高度由内容撑开；若内容为空，height 就是 0 —— 它不会凭空“显示”出来。
常见误区：以为加了 padding 或 border 后，width: 300px 还是总宽 300px。实际总宽度 = width + 左右 padding + 左右 border。比如：
div {
width: 200px;
padding: 10px;
border: 3px solid #333;
}
这个 div 占据的水平空间是 200 + 10×2 + 3×2 = 226px。
- 想让
width表示“包含 padding 和 border 的总宽”，用box-sizing: border-box -
height同理，不设值时由内容决定；设了固定值但内容超长，会溢出（除非加overflow控制） - 行内元素（如
span）不响应width/height，必须先设display: block或inline-block
padding 和 margin 混淆导致布局错位
padding 是内容到边框的距离，影响背景色和边框位置；margin 是边框到其他元素的距离，不继承背景、不响应鼠标事件，且会发生合并（collapse）。
典型问题：两个相邻 div 各设 margin-bottom: 20px，结果垂直间距不是 40px，而是 20px —— 这就是外边距合并（margin collapse）。
- 垂直方向上，相邻块级元素的
margin-top和margin-bottom会取较大值，不是相加 - 父子间也会塌陷：子元素的
margin-top“顶穿”父元素顶部，让整个父容器下移 - 避免塌陷常用法：
overflow: hidden或padding-top: 1px在父元素上（不改结构、不增边框） -
padding不合并，但会撑大盒子；margin不撑大盒子，但控制留白
border-radius 圆角在不同宽高比下的表现
border-radius 值超过元素对应方向半宽/半高时，会自动“截断”为最大可圆角度，不是报错也不是无效。
例如一个 width: 200px; height: 100px 的 div，设 border-radius: 50px，左右边缘能圆，上下只能圆到 50px（因高度只有一半），最终是椭圆弧；设 border-radius: 50% 才真正按比例裁切。
-
border-radius: 50%→ 真正的“尽可能圆”，宽高比 1:1 时才是正圆 -
border-radius: 100px→ 绝对值，超出部分被忽略（如高度仅 60px，顶部/底部圆角最多 30px） - 单角设置如
border-top-left-radius更灵活，适合卡片左上角微圆、右下角尖锐等设计 - 配合
overflow: hidden可裁剪子元素（比如头像图超出圆角部分）
box-sizing 改变盒模型计算逻辑
默认 box-sizing: content-box（标准模型），width/height 只管内容区；设成 border-box 后，width 就变成“从左 border 到右 border”的总宽。
这是现代 CSS 布局的起点，几乎所有重置样式（如 Normalize.css、modern-normalize）都默认全局设 * { box-sizing: border-box }。
- 不用反复心算 padding/border 对总尺寸的影响
- 响应式中百分比宽度（如
width: 50%）更可控，不会因 padding 导致换行或溢出 - 注意：
box-sizing不继承，需显式设置或靠通配符覆盖 - 旧版 IE8+ 支持
border-box，无需 polyfill
复杂点在于嵌套时各层 box-sizing 不一致容易误判尺寸，建议项目初期就统一设好，别依赖默认值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
