盒模型详解：元素大小怎么算？

• 折叠只影响渲染间距，不影响 DOM 结构或 JavaScript 获取的 offsetTop 等值
• 浮动、绝对定位、display: inline-block 或 flex 容器子项不参与折叠
• 父元素和第一个/最后一个子元素之间也可能发生外边距折叠（导致父容器“塌陷”）
• 避免意外折叠的常见做法：给父容器设 padding、border，或触发 BFC（如 overflow: hidden）

内联元素的 width/height 失效，但盒模型依然存在

span、a 这类默认 display: inline 的元素，设 width 或 height 无效，看起来像“没盒模型”。其实它有完整的盒模型，只是尺寸由内容决定，且 margin 仅左右生效，上下被忽略（但 vertical-align 会影响布局位置）。

• 想让它响应 width/height，必须改 display：比如 inline-block、block 或 flex
• line-height 控制内联元素的“行内高度”，常用来垂直居中单行文本
• 用 display: inline-flex 可保留行内流特性，同时获得 flex 布局能力

flex 容器下，子元素的盒模型行为被重新定义

一旦父元素设了 display: flex，子元素（flex item）的 width/height、margin、甚至 min-width 都可能被 flex 算法覆盖。例如 flex: 1 会让元素拉伸填满剩余空间，此时写的 width 就只是“基准值”，不是最终结果。

• flex-basis 才是 flex item 主轴上的初始尺寸，它替代了传统 width 的作用（主轴为水平时）
• margin: auto 在 flex 容器里可实现真正的居中（包括垂直），这是普通流做不到的
• 想禁用 flex 的尺寸干预，可显式设 flex: none（即 flex: 0 0 auto）
• 调试时用浏览器开发者工具的“Layout”面板，比肉眼数像素更可靠

盒模型不是画个示意图就完事的概念——它直接决定你写的每个像素是否出现在预期位置。最常被忽略的是 box-sizing 的默认行为和 margin 折叠的隐式触发，这两个点几乎贯穿所有布局问题。

本篇关于《盒模型详解：元素大小怎么算？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！