CSS display 属性全解析：块级 / 行内 / 行内块 / 隐藏
CSS 的display属性是控制元素显示类型的核心，通过修改display值，可灵活切换元素的布局特性（块级、行内、行内块），甚至隐藏元素。本文结合实战代码，详解display的 4 个核心取值及应用场景，新手可直接复制上手。
一、display 属性核心代码示例
<!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隐藏元素不占空间，是动态控制元素显示 / 隐藏的核心属性。