css display 属性有哪些常见值_元素显示方式基础讲解

display最常用值为block、inline和inline-block：block独占一行且可调尺寸；inline在文本流中内联显示、宽高不可控；inline-block兼具二者特性，可并排且可设宽高。

display 最常用的三个值是 block、inline 和 inline-block，它们决定了元素在文档流中“占不占整行”以及“能不能调大小”，绝大多数布局问题都出在这三者的误用上。

什么时候该用 block？——需要独占一行且可控尺寸时

块级元素默认从新行开始，宽度撑满父容器，能设 width、height、上下 margin 和完整 padding。适合做容器、标题、段落这类结构单元。

• 常见默认 block 元素：<div>、<code><p></p>、<h1></h1>～<h6></h6>、<ul></ul>、<section></section>
• 典型误用：把 <span></span> 改成 block 后没加 width，结果它突然占满整行，挤垮了旁边内容
• 兼容性无忧：所有浏览器从 IE6 起就完全支持

.card {   display: block;   width: 300px;   margin: 0 auto; /* 水平居中有效 */   background: #f5f5f5; }

什么时候该用 inline？——只在文本流里“插个标签”时

行内元素不会换行，宽高由内容决定，width/height 无效；上下 margin 不起作用（推不动其他行），但左右 margin 和全部 padding 可见（只是可能视觉重叠）。

• 常见默认 inline 元素：<span></span>、<a></a>、<em></em>、<strong></strong>
• 典型陷阱：padding-top 看似生效，但不会抬高下一行文字——因为行内元素的垂直对齐靠 vertical-align，不是 margin
• 慎用于图标或按钮：想水平排列又需宽高时，inline 会失效，应选 inline-block 或 flex

.highlight {   display: inline;   background: yellow;   padding: 2px 6px; /* 上下 padding 可见，但不撑开行高 */   margin: 5px;       /* 仅左右 margin 有分隔效果 */ }

inline-block 是什么？——“能并排又能调大小”的折中解

它是 inline 和 block 的混合体：同行排列 + 完整尺寸控制。常被用来替代已淘汰的 Float 布局，比如导航菜单、按钮组、商品卡片列表。

立即学习“前端免费学习笔记（深入）”；

• 幽灵间隙问题：多个 inline-block 元素间会因 HTML 换行/空格产生约 4px 间隙，解决方法包括：font-size: 0 父容器、移除模板空格、用 margin-left: -4px 抵消
• 垂直对齐默认是 baseline，常导致文字和图标不对齐，加 vertical-align: middle 更稳妥
• IE8+ 支持，但 IE7 需要 hack（*display: inline; *zoom: 1），现在基本可忽略

.nav-item {   display: inline-block;   width: 120px;   height: 40px;   vertical-align: middle; /* 关键！避免底部对齐错位 */   margin-right: 10px; }

别只盯着这三个——none、flex、grid 是现代布局的刚需

display: none 是真隐藏：不渲染、不占空间、不触发重排；而 visibility: hidden 只是“看不见”，仍占位。js 控制显隐时，优先用 none 避免布局抖动。

• flex 和 grid 已不是“可选项”，而是解决一维/二维布局的默认方案。它们会改变子元素的渲染行为（如 flex 下子元素自动变成 flex-item），所以不要混用 display: flex 和 display: inline-block 在父子关系中
• table 系列值（如 table-cell）仍有实用场景：纯 css 实现垂直居中老方案，或兼容极旧系统
• contents 是个隐形人：元素自身不生成盒子，子元素直接“浮”到父级流中——调试时容易找不到 dom 节点，慎用于关键容器

.modal-overlay {   display: none; /* JS 切换时用这个，比 visibility 更干净 */ } <p>.flex-container { display: flex; gap: 12px; /<em> 注意：gap 在 flex 中需配合 modern browsers </em>/ }

真正卡住人的往往不是“不知道有这些值”，而是没意识到 display 一改，整个盒模型规则就变了——比如把 inline 元素设成 block，它立刻获得上下 margin 权限，可能意外撑开父容器高度；又比如 inline-block 的 vertical-align 默认值会让图标吊在文字下方。动手前先问一句：它现在“属于哪类流”，比死记值更重要。