CSS 显示类型

display 是 CSS 最重要的属性之一——它决定了元素在页面上的基本行为：是占满一行还是与其他元素同行？能否设置宽高？后代元素如何排列？

display 大家庭

display 的取值可以分为两大类：外部显示类型（元素自身如何参与布局）和内部显示类型（子元素如何排列）。

核心外部显示类型

值行为
block块级：占满整行，可设宽高
inline行内：只占内容宽度，不换行，不可设宽高
inline-block行内块：像行内元素一样同行排列，但可以设宽高
none不显示，元素从渲染树移除，不占空间
css 
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

display: none vs visibility: hidden

两者都隐藏元素，但行为不同：

属性占位空间事件响应子元素
display: none不占空间不响应事件全部隐藏
visibility: hidden保留空间不响应事件可覆盖为 visible
opacity: 0保留空间仍可响应全部透明
css 
/* 元素从页面消失，不占位 */
.remove { display: none; }

/* 元素隐藏但保留空间（占位符） */
.invisible { visibility: hidden; }

/* 元素透明但可以交互（点击等） */
.transparent { opacity: 0; }

inline-block — 行内块

兼具 inline（同行排列）和 block（可设宽高）的特性：

css 
.nav-item {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-right: 0.5rem;
}
html 
<a class="nav-item" href="/">首页</a>
<a class="nav-item" href="/about">关于</a>
<a class="nav-item" href="/contact">联系</a>

inline-block 元素之间默认有空白间距（因为 HTML 中的换行符被当作一个空格）。解决方法：父元素设 font-size: 0 后子元素恢复字号，或使用 Flexbox 替代。

Flex 和 Grid 的内部模式

当 display 设置为 flex 或 grid 时，元素的外部行为仍是 block（占满整行），但内部子元素的布局方式发生了根本变化。这是现代 CSS 布局的两大核心，分别在 Flexbox 和 Grid 章节详细讲解。

css 
/* 外部 block，内部 flex 布局 */
.container {
  display: flex;
  gap: 1rem;
}

/* 外部 block，内部 grid 布局 */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

display 双值语法

CSS Display Module Level 3 引入了双值语法，将内部和外部类型分开：

新语法等价旧语法
block flowblock
inline flowinline
block flexflex
inline flexinline-flex
block gridgrid
inline gridinline-grid
css 
/* 新写法：使元素自身表现为行内，但内部用 flex 排列子元素 */
.inline-menu {
  display: inline flex; /* 等价于 display: inline-flex */
}

双值语法目前浏览器支持良好，但大多数项目仍使用单值简写。flex、grid、none 等单值仍然有效且不会被淘汰。

速查表

你想要…用
标准段落/div，占满整行display: block
文字中的链接/按钮，保持行内display: inline
水平排列且可设宽高的按钮display: inline-block（或用 flex）
一组元素在一行上灵活排列display: flex
二维网格布局display: grid
完全移除元素display: none
隐藏但保留位置visibility: hidden