display: block 独占一行、撑满父宽、支持盒模型属性；inline 不换行、忽略宽高、垂直内外边距不影响布局；inline-block 兼具二者特性，但需处理空格间隙；none 彻底移除，hidden 仅隐藏但仍占位。
display: block 和 inline 的行为差异在哪
display 属性直接决定元素在文档流中的“身份”，不是视觉样式，而是布局角色。设为 block 后，元素会独占一行、默认宽度撑满父容器、支持 width/height/margin 等盒模型属性；设为 inline 后，它就变成文字那样的“行内角色”：不换行、忽略 width/height、垂直方向的 margin 和 padding 不影响布局（只影响背景和边框绘制）。
-
display: block适合做容器、卡片、按钮组外层包装 -
display: inline适合包裹文字片段、图标、小标签等嵌入文本流的内容 - 切换时如果发现尺寸没变，大概率是忘了清除浏览器默认样式（比如
a标签有默认text-decoration和颜色，但不会影响display行为）
为什么 display: inline-block 是更常用的折中方案
inline-block 是真正兼顾“行内排列”和“块级控制”的方案：它像 inline 一样可以和其他元素并排显示，又像 block 一样支持 width、height、vertical-align 和完整 margin。
- 常见误用：给
inline-block元素写float—— 完全没必要，float会破坏文档流，而inline-block本就在流内 - 注意空格问题：HTML 中两个
inline-block元素之间如果有换行或空格，渲染时会多出约 4px 的空白间隙（来自字体的空白字符） - 解决间隙的方法之一是把父容器的
font-size: 0，子元素再单独设回需要的字号
<div class="container"> <span class="item">A</span> <span class="item">B</span> </div>
对应 CSS：
.container { font-size: 0; }
.item { display: inline-block; font-size: 16px; }
display: none 和 visibility: hidden 的根本区别
display: none 是彻底移除元素的布局位置——它不占空间、不响应事件、子元素也一并消失；而 visibility: hidden 只是“看不见”，元素还在文档流里占位，也能响应 click（除非加了 pointer-events: none）。
立即学习“前端免费学习笔记（深入）”；
- 动画切换时慎用
display: none：它无法参与 CSS 过渡（transition），因为它是离散状态（有 / 无），不是可插值属性 - 如果只是临时隐藏又想保留布局，用
visibility: hidden更稳妥；如果确定要释放空间、断开交互，就用display: none - JavaScript 中检查可见性时，
getComputedStyle(el).display === 'none'比offsetParent === null更可靠（后者受祖先display: none影响）
现代布局中 display 的新成员：flex 和 grid
display: flex 和 display: grid 不是“块/行内”的替代品，而是更高阶的布局上下文创建者。一旦设为它们，子元素的 display 类型（如 inline 或 block）基本失效，取而代之的是 flex-item 或 grid-item 的行为规则。
- 不要对 flex 容器本身再设
display: inline-flex后又强行加width——它默认是内容宽，但可以设width控制自身尺寸 -
display: contents是个容易被忽略的选项：它让元素“消失”于渲染树，但保留子元素在文档流中的位置，常用于语义化包装（比如用div包住一组li却不想引入额外盒模型干扰）
真实项目里，display 的切换往往不是孤立操作，它常和 position、float、overflow 甚至 contain 产生隐式交互。改之前最好先看一眼 computed styles，别只盯着你写的那行 CSS。
