显示模式

这一课你将能做到

1. 区分 block、inline、inline-block 三者的布局行为差异
2. 解释 none 和 visibility: hidden 的区别
3. 在合适的场景选对 display 值，写出不易出错的布局代码

为什么要学

display 决定了一个元素在页面中的「生存方式」——它独占一行还是跟着别人排？它的宽高能不能设置？上下 padding 能不能撑开？这些问题搞不清，写布局就是盲人摸象。

人话：block 像客厅里的沙发——它自己占一行；inline 像书里的字——在字行里挤着排；inline-block 像乐高积木——在一行里排但能控制尺寸。

先建立图像

<style>
    .b { display: block; width: 120px; height: 40px; background: skyblue; margin: 4px; }
    .i { display: inline; width: 120px; height: 40px; background: pink; padding: 4px; }
    .ib { display: inline-block; width: 120px; height: 40px; background: lightgreen; }
    .v { visibility: hidden; }
</style>

<div class="b">block</div>
<div class="b">block</div>
<span class="i">inline</span>
<span class="i">inline</span>
<span class="ib">inline-block</span>
<span class="ib">inline-block</span>

浏览器渲染后：

┌──────────────┐
│   block      │  ← 各独占一行，宽/高生效
├──────────────┤
│   block      │
inlineinline  ┌────────────┐  ← 行内混排，宽/高无效（宽高度色块缩到文字大小）
              │inline-block│ ← 混排但宽/高有效
              │inline-block│

跟着做

步骤 1：block 块级元素

.b { display: block; }

特点：独占一行；宽高可设；默认 width: 100%；上下 margin/padding 正常推挤布局。

常见标签：<div> <p> <h1> <section> <ul> <li> <form>

步骤 2：inline 行内元素

.i { display: inline; }

特点：不独占一行，宽度由内容决定；宽高不可设；上下 margin 不生效，上下 padding 渲染但不推挤布局。

常见标签：<span> <a> <strong> <em> <label> <img>（img 是替换元素，特殊）

步骤 3：inline-block

.ib { display: inline-block; }

特点：兼具两者：在文本流中像 inline 一样横向排列；又像 block 一样能设宽高、设 margin 生效。

<style>
    .btn {
        display: inline-block;
        padding: 8px 16px;
        background: #0366d6;
        color: #fff;
        text-decoration: none;
        border-radius: 4px;
    }
</style>
<a href="#" class="btn">按钮 1</a>
<a href="#" class="btn">按钮 2</a>

两个按钮横排，且能自由控制内边距和背景。

步骤 4：none vs visibility: hidden

.none  { display: none; }          /* 元素消失，不占据空间 */
.hidden { visibility: hidden; }    /* 元素不可见，仍占据空间 */

<p>A</p>
<p class="none">B（消失了）</p>
<p>C</p>

<p>X</p>
<p class="hidden">Y（看不见但占位）</p>
<p>Z</p>

A-C 中 B 完全消失，A 和 C 挨在一起；X-Z 中 Y 虽然看不见，但位置空白还在。

步骤 5：隐藏元素的方法对比

方法	占据空间	可交互	支持动画
display: none	否	否	否（无法过渡）
visibility: hidden	是	否	可过渡 opacity
opacity: 0	是	是（鼠标可点）	可过渡
transform: scale(0)	是	否	可过渡

步骤 6：inline-block 的幽灵间隙

<style>
    .nav a { display: inline-block; padding: 10px 20px; background: #eee; }
</style>
<nav class="nav">
    <a href="#">首页</a>
    <a href="#">文章</a>
    <a href="#">关于</a>
</nav>

你会发现链接之间有 4px 左右的小空隙——这是换行符产生的空白字符。

解决方法：父元素加 font-size: 0，子元素再设回字体大小；或把标签写在一行不留空格；或用 flex 替代 inline-block。

讲清楚要点

1. display 决定元素的「内部」和「外部」行为：外部指它对周围的影响（排不排别人），内部指它怎么安排自己的孩子。
2. 行内元素设宽高不生效：要设宽高先让它 block 或 inline-block 化。
3. margin: 0 auto 只在 block 元素有效：行内元素要先 display: block 再居中。
4. display: none 元素不存在于渲染树：搜索引擎不索引，屏幕阅读器读不到；如只是视觉隐藏用 visually-hidden 方案。
5. 现代布局优先 flex/grid：inline-block 做横向列表的场景，现在基本被 display: flex 取代。

你可能会懵的地方

• img 是 inline 但为什么能设宽高？ img 是「替换元素」（replaced element），它内容由外部资源决定，所以宽高能覆盖。

• display: inline-block 为什么不推荐做大布局？ 有幽灵间隙、对齐基线问题、嵌套复杂难维护。现在用 flex/grid 更省心。

• display: none 的孩子算存在吗？ 不算。整个子树被从渲染树移除，不占空间、不参与事件。

• display 有哪些值？ 常用：block、inline、inline-block、none、flex、grid、table、table-cell；新值有 contents、flow-root 等。

• 为什么 span 加 margin-top 没反应？ 行内元素的 margin-top 和 margin-bottom 不生效。

错法对照

错法	问题	正解
display: inline; width: 200px;	inline 不能设宽	用 inline-block 或 block
span { margin-top: 20px; } 期望推开邻居	行内 margin-top 不生效	改 display: inline-block
用 display: none 做渐隐动画	none 不支持过渡	用 opacity: 0 或 visibility: hidden
把布局全用 div block 堆	代码冗余、不够语义	用 <nav> <section> 等语义标签
visibility: hidden 当不存在处理	仍占位、仍影响布局	要不占位用 display: none

卡点急救

1. 元素宽/高不生效：F12 看 display 是不是 inline。是就改 inline-block。
2. 两个 inline-block 中间有空隙：幽灵间隙问题。父 font-size: 0 或改 flex。
3. 隐藏元素后位置塌陷：可能用了 display: none，换 visibility: hidden 保留空间。

面试常问

• block、inline、inline-block 区别？ block 独占一行、可设宽高；inline 在一行混排、不可设宽高、上下 margin 不生效；inline-block 横排但能设宽高。

• display: none 和 visibility: hidden 区别？ none 从渲染树移除，不占空间；hidden 保持占位，只是不可见。

• opacity: 0、visibility: hidden、display: none 区别？ opacity 元素仍在且可交互；visibility 元素仍在但不可交互；display 彻底移除。

自测三问

1. 给 <span> 设 width: 100px 为什么不生效？
2. 想让一个元素隐藏且不占位，用什么属性？
3. inline-block 间隙是怎么产生的？怎么解决？

小结一句话

display 定义了元素在页面中的生存方式——独占一行用 block，跟随混排用 inline，既要横排又要控尺寸用 inline-block；彻底消失用 none，暂隐占位用 visibility:hidden。

延伸

• MDN display
• 下一课：position 定位，让元素脱离正常流。