CSS 的display属性是控制元素显示类型的核心通过修改display值可灵活切换元素的布局特性块级、行内、行内块甚至隐藏元素。本文结合实战代码详解display的 4 个核心取值及应用场景新手可直接复制上手。一、display 属性核心代码示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCSS 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 idsp1span1block块级/span span idsp2span2inline行内宽高无效/span span idsp3span3原生行内/span hr div iddiv1div1inline行内/div div iddiv2div2inline行内/div div iddiv3div3inline行内/div hr pp1inline-block行内块/p /body /html二、display 核心取值详细说明属性值元素特性宽高设置排版方式典型应用场景block块级元素默认div/p/h1 等可设置独占一行宽度默认 100%页面大布局头部、主体、底部inline行内元素默认span/a/strong 等不可设置与其他元素同行宽高随内容行内文本 / 小元素样式调整inline-block行内块元素兼具两者特性可设置与其他元素同行可自定义宽高按钮、导航栏选项、图文混排none隐藏元素-不占空间不渲染动态隐藏元素如弹窗关闭关键对比block vs inlineblock 独占一行、可设宽高inline 同行显示、宽高无效inline vs inline-blockinline-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隐藏元素不占空间是动态控制元素显示 / 隐藏的核心属性。