display: block 完全控制盒模型（宽高、内外边距），独占一行；display: inline 放弃宽高与垂直方向边距，将空格换行当文本渲染，仅响应 vertical-align；inline-block 兼具二者特性但需处理基线对齐和空格间隙。
display: block 和 inline 的行为差异到底在哪
关键不是“块级”“行内”这些名词，而是它们对盒模型的控制权不同。display: block 拿回了宽度、高度、内外边距的完全控制权；display: inline 则主动放弃——它不响应 width、height、vertical-align 以外的定位属性，且会把换行符和空格当文本渲染。
常见错误现象：span 设了 width: 200px 没反应；div 里写了两个 inline 元素，中间却有看不见的空隙。
- 使用场景：
display: block适合需要独立占行、自定义尺寸的容器（如导航栏、卡片）；display: inline仅适合纯文本流内的轻量标记（如em、strong） -
margin-top/margin-bottom在inline元素上无效，但margin-left/margin-right有效 - 兼容性无坑，所有浏览器都按规范实现，但老 IE（6/7）对
inline元素的line-height行高计算略有偏差
inline-block 是怎么“两头讨好”的
display: inline-block 不是 block 和 inline 的混合体，而是一个独立的显示模式：它保留了 inline 的“不换行、可并排”特性，又像 block 一样支持全部盒模型属性。
最容易踩的坑是默认的基线对齐（baseline alignment）：多个 inline-block 元素会按文字基线对齐，导致底部出现意外空白。
立即学习“前端免费学习笔记（深入）”；
- 解决方法：给父容器设
font-size: 0，再给子元素单独设字体；或统一子元素vertical-align: top/middle/bottom - 空格问题依然存在——HTML 中的换行和缩进会被解析为一个空格字符，导致元素间出现约 4px 间隙
- 性能影响极小，但大量使用时要注意重排（reflow）频率，尤其在动态插入/删除节点时
什么时候该用 inline-block 而不是 flex
如果你只是想让几个按钮或图标水平排列，并且不需要对齐、换行、顺序反转等复杂布局能力，inline-block 更轻量、更可控。Flex 是布局系统，inline-block 是单个元素的显示模式。
常见错误现象：用 flex 做三四个图标排列，结果发现要额外处理 justify-content、align-items、甚至 min-width 防止换行，反而比加一行 vertical-align: middle 更费劲。
- 适用条件：子元素数量固定、无需响应式折行、父容器宽度明确
- 不适用条件：需要子元素等宽填充、需动态增删项、需支持 RTL 文本方向自动翻转
- 兼容性注意：IE8 不支持
inline-block（对inline元素设此值无效），但可通过zoom: 1; *display: inline;hack 兼容
display 属性修改后，哪些样式会失效或变化
改 display 不只是换行与否的问题，它会重置整个盒类型，连带影响很多隐含行为。
比如把 table-cell 改成 block，vertical-align 就彻底没用了；把 inline 改成 inline-block，原本被忽略的 height 突然生效了——但同时，line-height 对整体高度的影响方式也变了。