box-sizing 默认为 content-box 时 width/height 不含 padding 和 border，易致布局溢出；margin: 0 auto 仅对块级元素有效；padding 不影响布局流但扩大交互区；vertical-align 仅适用于 inline/table-cell 元素。
box-sizing 属性不设为 border-box 时，width/height 容易算错
默认的 box-sizing: content-box 意味着你写的 width: 200px 只包含内容区，padding 和 border 会额外加在上面。比如 width: 200px; padding: 10px; border: 1px solid，实际占宽是 200 + 10×2 + 1×2 = 222px，布局容易撑破容器。
实操建议：
- 全局重置：
*, *::before, *::after { box-sizing: border-box; } - 对需要精确尺寸控制的组件（如表单输入框、卡片），显式声明
box-sizing: border-box - 调试时用浏览器开发者工具的「Layout」面板，直接看各区域尺寸是否符合预期
用 margin 实现居中时，inline 元素和 flex 子项行为完全不同
margin: 0 auto 只对 display: block 或 display: flex 等块级上下文中的元素生效；对 span、a 这类默认 inline 元素无效，也不会触发居中。
实操建议：
- 想让文字内联元素水平居中：用父容器的
text-align: center，而不是给子元素加margin - 想让块级盒子水平居中：确保它有明确宽度，并设
margin: 0 auto - 在
display: flex容器里，margin: auto可以让单个子项在主轴或交叉轴上“吸边”或居中，比如margin: auto让子项在交叉轴上垂直居中
padding 不影响其他元素的布局位置，但会改变可点击/可交互区域
padding 是盒模型内部空间，不会推挤兄弟元素；而 margin 是外部间距，会参与外边距合并（margin collapse）——相邻块级元素的垂直 margin 会取较大值，不是相加。
实操建议：
- 按钮、链接等需要扩大点击热区时，优先加
padding，而不是靠margin推开周围内容 - 列表项之间想留空隙，用
margin-bottom比用padding-bottom更安全，避免背景色或边框被“撑开” - 遇到两个相邻
div的margin-top和margin-bottom没叠加上去？大概率是发生了外边距合并，可加overflow: hidden或border打破 BFC 边界
vertical-align 只对 inline / table-cell 元素有效，别误用于 flex 或 grid
很多人试图用 vertical-align: middle 去垂直居中一个 div，结果没反应——因为该属性只作用于 display: inline、inline-block、table-cell 这几类元素，对 block 或现代布局（flex/grid）完全无效。
实操建议：
- 行内图片/图标与文字不对齐？给图片加
vertical-align: middle或top，比调margin-top更稳定 - 表格单元格内文字垂直居中：直接写
vertical-align: middle，不用额外包裹 - 要真正垂直居中块级内容？用
display: flex; align-items: center或display: grid; place-items: center
CSS 盒模型本身不难，难的是不同 display 值下 margin、padding、vertical-align 的生效条件和边界行为。很多对齐问题其实不是写错了值，而是没意识到当前元素根本不在那个规则的作用域里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
