盒模型边界线位置不可直接控制，只能通过padding、border、margin和box-sizing组合间接决定：border紧贴padding外侧，其像素位置受box-sizing影响——content-box下width仅指内容宽，border位于内容+padding之后；border-box下width包含padding和border，border被压缩进设定宽度内。
盒模型边界线位置不能“直接控制”，只能通过 padding、border、margin 和 box-sizing 的组合间接决定——关键在于你定义的是哪条线：内容边界？边框外沿？还是外边距终点？
border 位置由 padding 和 content 共同决定
边框（border）永远紧贴在 padding 区域的外侧，也就是内容区域 + 内边距之后的那条线。它不“浮动”，也不可偏移，只响应盒尺寸变化。
- 如果你设了
padding: 20px，border就从内容边缘向外推 20px - 如果
box-sizing: content-box（默认），width: 200px指的是内容宽，加上padding和border后总宽会超 200px - 如果
box-sizing: border-box，width: 200px就是包含padding和border的总宽，此时border位置被“压缩”进这个 200px 内 -
border不支持transform或position偏移；想视觉上“挪动边框”，得靠outline或伪元素
margin-top/bottom 影响的是相邻盒子的间距，不是自身边界线
margin 不改变元素自身的任何边界线位置，它只是在元素“外边距盒”（margin box）外生成空白，用于推开其他元素。这条线本身不可见、不可样式化，也无几何意义。
-
margin-top: 30px不会让元素“上边”上移，而是让它的 margin box 顶部离前一个兄弟元素的 margin box 底部空出 30px - 父容器设了
overflow: hidden，子元素的负margin可能被裁剪，但它的 border 线仍在原处 - 不要用
margin来“对齐边框”，那是padding或scroll-margin的职责
scroll-margin 是唯一能“移动吸附锚点”的边界偏移属性
当元素参与滚动捕捉（scroll-snap-align）时，scroll-margin 才真正影响“哪条线对齐捕捉线”。它不改变渲染，只改计算逻辑。
-
scroll-margin-top: 60px表示：该元素的“起始边缘”（即 border box 顶边）在参与吸附计算时，向上偏移 60px 作为锚点 - 它和
margin-top共存时，两者叠加：布局推远兄弟元素 + 吸附点上移 -
scroll-margin不接受负值；只对设置了scroll-snap-align的子元素生效 - 常见误用：给导航栏加
margin-top试图避开固定头部——正确做法是容器设scroll-padding-top，子项设scroll-margin-top
真正容易被忽略的，是 border 在不同 box-sizing 下对“宽度归属”的语义切换——同一组 width/padding/border 值，在 content-box 和 border-box 下，border 线的实际像素位置可能差出几十像素。调试时务必先确认 box-sizing 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
