盒模型默认 content-box 导致 width 不含 padding/border，元素实际尺寸变大；改用 border-box 可解决；margin 不影响自身尺寸但会合并，padding 才撑开内部空间。
margin 和 padding 混用时元素尺寸为什么会“变大”
盒模型默认是 content-box，这意味着你设的 width: 200px 只算内容区，加上 padding 和 border 后，实际占位会超过 200px。很多人调完 padding 发现布局错位，就是卡在这儿。
- 浏览器默认使用
box-sizing: content-box，width和height不包含padding和border - 想让
width包含内边距？统一加box-sizing: border-box，推荐在根选择器里写：*, *::before, *::after { box-sizing: border-box; } -
margin不影响元素自身尺寸，但会影响它和邻居的距离；padding才真正“撑开”元素内部空间 - 垂直方向的相邻
margin会合并（margin collapse），比如两个<p></p>各设margin-bottom: 20px，实际间距不是 40px，而是 20px
如何让 margin 自动居中一个块级元素
只有当元素有明确宽度、且是块级（或 inline-block/absolute）时，margin: 0 auto 才生效。它不是万能居中方案，别指望用在 div 里套 span 上。
- 必须满足：非浮动、非绝对定位（或已脱离文档流但设了宽高）、
display为block或inline-block -
margin: 0 auto中的auto只对左右生效；上下auto在常规流中无效（除非是 flex/grid 子项） - 如果父容器用了
text-align: center，对inline元素有效，但对块级元素没用——别混淆这两套机制 - 现代更稳的方式是用
display: flex+justify-content: center，不用操心宽高和 display 类型
padding-top 百分比值为什么按父容器宽度计算
CSS 规范规定：所有基于百分比的 padding（包括 padding-top、padding-bottom）都相对于父容器的 width 计算，不是 height。这反直觉，但确实如此。
- 这是为了规避循环依赖——如果
padding-top: 50%按父height算，而父height又依赖子元素高度，就死锁了 - 常见用途是做等比例容器（如 16:9 视频框）：用
padding-top: 56.25%（即 9/16）配合position: relative+ 绝对定位子元素 -
margin的百分比也按父width算，行为一致 - 如果真要按高度算，得用
vh单位（如padding-top: 10vh），但注意它基于视口，不是父容器
flex 布局下 margin 和 padding 还容易出什么问题
Flex 容器里的子项，margin 仍起作用，但某些场景会被忽略或覆盖，尤其是自动外边距（margin: auto）这种“隐藏技能”。
- 在 flex 容器中，给子项设
margin: auto可以让它沿主轴/交叉轴居中（甚至单独设margin-left: auto推到末尾），这是普通流里没有的行为 -
padding在 flex 子项上照常生效，但要注意：如果父容器设了align-items: stretch（默认），子项的padding会撑开它的交叉轴尺寸 - flex 子项的
margin不会合并（no margin collapse），这点和普通块级流不同 - 慎用
margin模拟 flex 的对齐效果——比如用margin-left: auto排最后一个按钮，不如直接用justify-content: space-between清晰可靠
盒模型的间距逻辑本身不复杂，难的是它总在不同上下文里切换规则。最常被忽略的，其实是 box-sizing 的默认值和 margin 合并这两个点——改完样式没反应，八成栽在这儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
