CSS display 属性全解析：块级 / 行内 / 行内块 / 隐藏

CSS 的display属性是控制元素显示类型的核心，通过修改display值，可灵活切换元素的布局特性（块级、行内、行内块），甚至隐藏元素。本文结合实战代码，详解display的 4 个核心取值及应用场景，新手可直接复制上手。

一、display 属性核心代码示例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS display属性实战</title>
    <style>
        /* 1. span（默认行内）改为block（块级），注：none被后续block覆盖 */
        #sp1 {
            display: none; /* 隐藏元素（被后续赋值覆盖） */
            display: block; /* 块级：独占一行，可设宽高 */
            width: 100px;
            height: 50px;
            background-color: red;
        }
        /* 2. 原生span（行内）：设宽高无效 */
        #sp2 {
            width: 100px;
            height: 50px;
            background-color: lightblue;
        }
        /* 3. div（默认块级）改为inline（行内）：设宽高无效 */
        div {
            display: inline;
            width: 100px; /* 行内元素宽高设置无效 */
        }
        #div1 { background-color: lightgreen; }
        #div2 { background-color: lightpink; }
        #div3 { background-color: lightyellow; }
        /* 4. p（默认块级）改为inline-block（行内块）：同行显示+可设宽高 */
        p {
            width: 200px;
            height: 100px;
            background-color: lightgray;
            display: inline-block;
        }
    </style>
</head>
<body>
    <span id="sp1">span1（block：块级）</span>
    <span id="sp2">span2（inline：行内，宽高无效）</span>
    <span id="sp3">span3（原生行内）</span>
    <hr>
    <div id="div1">div1（inline：行内）</div>
    <div id="div2">div2（inline：行内）</div>
    <div id="div3">div3（inline：行内）</div>
    <hr>
    <p>p1（inline-block：行内块）</p>
</body>
</html>

二、display 核心取值详细说明

属性值	元素特性	宽高设置	排版方式	典型应用场景
`block`	块级元素（默认：div/p/h1 等）	可设置	独占一行，宽度默认 100%	页面大布局（头部、主体、底部）
`inline`	行内元素（默认：span/a/strong 等）	不可设置	与其他元素同行，宽高随内容	行内文本 / 小元素样式调整
`inline-block`	行内块元素（兼具两者特性）	可设置	与其他元素同行，可自定义宽高	按钮、导航栏选项、图文混排
`none`	隐藏元素	-	不占空间，不渲染	动态隐藏元素（如弹窗关闭）

关键对比

block vs inline：block 独占一行、可设宽高；inline 同行显示、宽高无效；
inline vs inline-block：inline-block 保留 "同行显示" 特性，且支持宽高设置。

三、实战注意事项

属性覆盖规则 ：同一元素的display多次赋值时，最后一次生效 （如示例中#sp1的none被block覆盖，元素不会隐藏）；
行内元素宽高无效 ：给inline元素（如 span、改为 inline 的 div）设置width/height不会生效，这是行内元素的核心特性；
none vs 隐藏的区别 ：display: none 完全隐藏元素（不占空间），区别于visibility: hidden（隐藏但保留空间）；
inline-block 换行问题 ：多个 inline-block 元素同行时，元素间的换行 / 空格会产生间隙，可通过父元素font-size: 0解决。

实用扩展：动态隐藏元素

复制代码

/* 点击按钮隐藏span1（实际开发结合JS） */
#sp1.hide {
    display: none; /* 隐藏后不占空间，span2会顶替位置 */
}

四、典型应用场景

导航栏布局 ：把 div（默认 block）改为inline-block，实现导航选项同行显示且可自定义宽高；
按钮样式 ：a 标签（默认 inline）改为inline-block，支持设置按钮宽高、内边距；
动态布局 ：移动端适配时，把多列布局的 div 改为block（独占一行），适配小屏幕；
元素隐藏 ：弹窗关闭时设置display: none，完全隐藏且不占用页面空间。

总结

display核心取值：block（块级）、inline（行内）、inline-block（行内块）、none（隐藏）；
block 独占一行、可设宽高；inline 同行显示、宽高无效；inline-block 兼具两者特性；
none隐藏元素不占空间，是动态控制元素显示 / 隐藏的核心属性。