CSS display 属性：从元素类型转换到隐藏元素的实用指南

最新推荐文章于 2026-08-05 15:30:42 发布

原创最新推荐文章于 2026-08-05 15:30:42 发布 · 349 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

CSS

话题

#CodingPlan·八月创作之星博客挑战赛

在前端开发中，display 是一个出场率极高的 CSS 属性。它决定了元素"以什么方式出现在页面上"——是独占一行的块，还是挤在一行的行内元素，甚至是可以隐藏掉不参与布局。理解了 display，你就理解了网页排版的底层逻辑之一。

一、块元素与行内元素：一切的起点

HTML 元素天生分两类：

块元素（block）：<div>、<p>、<h1>~<h6>、<li> 等，默认 display: block，独占一行，可以设宽高。
行内元素（inline）：<span>、<a>、<strong> 等，默认 display: inline，不换行，相邻行内元素排在同一行，但不能直接设宽高。

这两类不是焊死的，靠 display 属性就能互相转换。

二、display 常用取值一览

值	作用
`block`	转为块元素，独占一行，可设宽高
`inline`	转为行内元素，与其他行内元素同行，不能设宽高
`inline-block`	行内块：同行排列 + 可设宽高
`none`	彻底隐藏，元素不参与布局（像没写过一样）
`flex / grid / table`	布局类取值（了解即可，本文不展开）

💡 我们日常写的
之所以是块元素，本质就是浏览器给它默认设置了 display: block。

三、四个典型场景与代码

1️⃣ 行内元素 → 块元素

<span> 默认是行内的，设了宽高也不生效，转成 block 就正常了：

<style>
    span {
        width: 200px;
        height: 200px;
        background-color: red;
        display: block;   /* 关键 */
    }
</style>

<span>我是span中的内容。</span>
<span>我是span中的内容。</span>

两个 span 会各占一行，并且 200×200 的红色方块能看到了。

2️⃣ 块元素 → 行内元素

两个 div 本来上下堆叠，转成 inline 后会挤到同一行（但宽高失效）：

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        display: inline;
    }
    .box2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        display: inline;
    }
</style>

<div class="box1">box1中内容。</div>
<div class="box2">box2中内容。</div>

⚠️ 转成 inline 后，width / height 会被忽略，因为行内元素不参与块级盒模型计算。

3️⃣ 块元素 → 行内块（inline-block）

这是最微妙的一个：既能设宽高，又能同行排列。

<style>
    .box1 { width: 200px; height: 200px; background: red; display: inline-block; }
    .box2 { width: 200px; height: 200px; background: blue; display: inline-block; }
    .box3 { width: 200px; height: 200px; background: yellow; display: inline-block; }
</style>

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

三个盒子横向排开了 ✅，但有个老坑——行内块之间会出现莫名空白间隙（约 4px），原因是 HTML 里的换行/缩进被当成文本节点渲染了。

🛠 更推荐的替代方案：浮动

.box1, .box2, .box3 {
    width: 200px;
    height: 200px;
    float: left;   /* 横向排列，无空白间隙 */
}

三个 div 紧贴在一起，没有空隙，实战里用 float（或现在更主流的 flex）比 inline-block 省心。

4️⃣ 隐藏元素：display: none vs overflow: hidden

很多人初学会混，其实完全不同：

<style>
    .box1 {
        width: 400px;
        height: 200px;
        background-color: red;
        /* display: none;    —— 整个盒子消失，不占位置 */
        /* overflow: hidden; —— 盒子还在，溢出的子内容裁掉 */
    }
    .box2 {
        width: 200px;
        height: 400px;   /* 比父盒子高，会溢出 */
        background-color: blue;
    }
</style>

<div class="box1">
    <div class="box2"></div>
</div>

display: none → 元素从渲染树里移除，像没写过这行代码，后面的元素会顶上来。
overflow: hidden → 元素本体还在、占位还在，只是超出它尺寸的内容被剪掉。

一句话区分：一个藏"整个元素"，一个藏"溢出的内容"。