显示模式

这一课你将能做到

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>