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

在前端开发中，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 就正常了：

html 复制代码

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

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

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

2️⃣ 块元素 → 行内元素

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

html 复制代码

<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）

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

html 复制代码

<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 里的换行/缩进被当成文本节点渲染了。

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

css 复制代码

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

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

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

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

html 复制代码

<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 → 元素本体还在、占位还在，只是超出它尺寸的内容被剪掉。

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

四、小结

display 是控制"元素怎么显示"的总开关
block / inline / inline-block 覆盖 80% 的日常需求
inline-block 有空白间隙坑，横向排列优先考虑 float（老方案）或 flex（现代方案）
隐藏用 display: none，裁剪溢出才用 overflow: hidden，别搞混

读者互动：

如果你觉得文章有待改进，请在评论区留言，我会认真考虑每一条建议。
如果觉得文章有帮助，欢迎点赞鼓励。
想与我共同进步，欢迎关注我。