display: block 独占一行、撑满父宽、支持宽高和上下外边距；inline 则同行排列、忽略宽高和上下外边距，仅左右外边距和内边距生效（后者影响背景但不推挤文字）。
display: block 和 inline 的行为差异到底在哪
关键不是“块级”或“行内”这种抽象说法，而是它们对盒模型的默认约束不同：block 会独占一行、宽度默认撑满父容器、可设 width/height/margin；inline 则紧贴文字流排列、忽略 width/height 和上下 margin，只响应左右 margin 和 padding（但 padding 会影响背景和边框，不推挤文字）。
常见错误现象：span 设了 width: 200px 没反应，或者给 a 加 margin-top 发现没效果——不是 CSS 写错了，是 display 类型根本不支持这些属性生效。
- 用
inline元素做按钮时，如果需要控制尺寸或垂直居中，必须先改成display: inline-block或display: block -
img默认是inline，所以底部会有空白间隙（对齐基线导致），解决方法不是调margin，而是设vertical-align: top/middle/bottom或display: block - 不要依赖浏览器默认 display 值来布局，显式声明更可控，比如把
div改成display: inline后，它就真变成文字流中的一环，不再撑开父容器高度
display: none 不只是“隐藏”，它彻底移除渲染流程
display: none 和 visibility: hidden 看似都是“看不见”，但前者让元素完全退出文档流：不占空间、不触发重排、子元素也一并消失、无法被聚焦、屏幕阅读器跳过；后者只是视觉隐藏，仍占据位置、能响应事件、可被读屏软件读取。
使用场景决定选哪个：做条件渲染（如表单步骤切换）优先用 display: none；做过渡动画或临时遮罩，别用它——因为 display 切换无法加 CSS transition，会突变。
立即学习“前端免费学习笔记（深入）”；
- Vue/React 中用
v-if或{condition && <component></component>}实际就是操作display: none或直接卸载节点，比v-show更轻量，但也意味着组件会重新挂载 - 调试时发现元素“不见了”，检查 computed styles 里
display是否为none，而不是只看opacity或visibility - SEO 友好性上，
display: none的内容通常不被搜索引擎索引，别用它藏关键词
inline-block 是最常被低估的 display 值
display: inline-block 是唯一既能同行排列、又能自由设置宽高/内外边距的方案。它解决了 inline 不能控尺寸、block 又不能并排的矛盾，但代价是默认有空白间隙（来自 HTML 中的换行符和空格）。
这个间隙不是 bug，是规范行为——浏览器把换行符当普通空白字符处理，而 inline 类元素会渲染它。很多人花半天调 font-size: 0 或负 margin 就是为了干掉它。
- 消除间隙最稳妥的方法是删 HTML 换行：把
<div class="item"></div> <div class="item"></div>写成一行，或用注释<!-- -->连接 - 用
flex替代inline-block布局更现代，但老项目兼容 IE10+ 时，inline-block仍是安全选择 -
vertical-align对inline-block生效，且默认是baseline，容易造成高度不对齐，统一设成top或middle能省不少事
display 的值不是只有 block/inline/none
现代 CSS 已支持更多语义化取值，比如 display: flex、display: grid、display: contents，甚至 display: flow-root（创建 BFC 防止外边距合并）。它们不是“替代品”，而是解决不同层级问题的工具。
容易踩的坑：把 display: flex 当万能解，结果子元素的 float 或 vertical-align 失效；或者误以为 display: contents 只是隐藏容器，其实它会让子元素“冒泡”到父级渲染上下文中，DOM 结构还在，但盒模型没了——这对可访问性（a11y）和打印样式很敏感。
-
display: flow-root是替代overflow: hidden创建 BFC 的干净写法，无副作用，推荐在清浮动等场景优先使用 -
display: table-cell等旧值仍有价值，比如实现等高列，但需注意表格相关 display 值会强制生成匿名盒子，可能干扰预期结构 - 不要在同一个元素上反复切换
display值来模拟状态（如弹窗显示/隐藏），性能差且易出竞态，用 class 控制更稳定
display 的复杂点不在值有多少，而在于每个值背后绑定了一整套盒模型规则、格式化上下文（FC）、层叠顺序逻辑。改一个值，可能连带影响定位、浮动、BFC、甚至无障碍树结构——别只盯着“能不能看见”。
