子元素默认用 width: auto 即可占满父元素内容区，无需 width: 100%；留白应通过父元素 padding 实现，而非子元素 margin；box-sizing: border-box 仅在需精确控制父容器整体尺寸时按需使用。
子元素默认不会自动占满父元素，除非显式设置宽高。要让 child 占满 parent 的可用内容区域（即扣除 padding 后的区域），关键不是靠 width: 100% 硬撑，而是理解盒模型中 width 的默认行为和 box-sizing 的作用。
width: auto 是默认且最可靠的选择
块级子元素在无浮动、无绝对定位时，width: auto（默认值）会使其内容宽度自动填满父容器的 content box（不含 padding 和 border）。也就是说，只要父元素没设固定 width 或受外层限制，子元素天然“占满”可用内容区。
- 不用写
width: 100%—— 它会让子元素试图等于父元素的 总宽度（含 padding），容易导致水平溢出或滚动条 - 确保子元素是块级（如
div、p）且未被float、display: inline等改变渲染模式 - 若父元素有
padding，子元素的width: auto自动避开它，正好贴着内边距边缘伸展
用 padding 在父元素上留白，而非靠子元素 margin
想让子元素“视觉上”不顶到父元素边缘？优先在 父元素 上设置 padding，而不是给子元素加 margin。这样既保持子元素自然占满 content 区，又实现内缩效果，逻辑更清晰、维护性更强。
- ✅ 推荐：
.parent { padding: 16px; }→ 子元素自动内缩 16px - ❌ 避免：
.child { margin: 16px; }→ 容易造成父容器高度塌陷或额外滚动 - 若需不同方向留白，用
padding-top、padding-left等单独控制
必要时配合 box-sizing: border-box
当父元素同时设置了 padding 和 border，又希望子元素宽度严格等于“可视区域宽度”（即包含 padding + border 的总宽），可将父元素设为 box-sizing: border-box。但这通常不是必须的——多数场景下，width: auto + 父级 padding 已足够。
立即学习“前端免费学习笔记（深入）”；
-
box-sizing: border-box改变的是父元素自身的尺寸计算方式，不影响子元素的自动填充逻辑 - 只有在需要精确控制父容器整体占地（比如栅格布局、卡片固定宽高）时才启用它
基本上就这些。核心就是：别强行用 100%，信默认的 auto；留白交给父元素的 padding；box-sizing 按需开启，不盲目套用。
