CSS中的display

用户971417181427
4 阅读11分钟

CSS 中几种 display 的区别

这篇文章的目标不是死记硬背，而是真正理解 display 到底在控制什么。

目录

一、display 到底是干嘛的

我刚学 CSS 的时候，会把 display 理解成“控制元素显示方式”。

这个说法不算错，但还不够准确。

更准确地说：

display 决定一个元素：

  1. 自己怎么参与布局
  2. 自己的子元素怎么排列

也就是说，display 不只是“看起来像块级还是行内”，它还会影响内部布局规则。

比如：

  • display: block
    元素自己表现为块级，内部内容按普通文档流排列

  • display: inline
    元素自己表现为行内，像文字一样参与排版

  • display: flex
    元素自己通常表现为块级，但它的子元素会按 flex 规则排列

  • display: grid
    元素自己通常表现为块级，但它的子元素会按 grid 网格规则排列

所以，理解 display 的关键不是背单词，而是搞懂它到底在决定哪两件事：

  • 外部怎么站队
  • 内部怎么排孩子

二、先搞懂块级元素和行内元素

在学习 display 之前，一定要先理解两个基础概念：

  • 块级元素
  • 行内元素

1. 块级元素是什么

块级元素默认会：

  • 独占一行
  • 从新的一行开始
  • 默认宽度会尽量撑满父容器
  • 可以设置 width 和 height

你可以把它理解成页面中的“一个区块”。

例如：

<div>我是 div</div>
<p>我是段落</p>
<h1>我是标题</h1>

它们通常会一行一个，竖着排下去。

2. 行内元素是什么

行内元素默认会：

  • 不独占一行
  • 和文字在同一行中排列
  • 宽度通常由内容撑开
  • 普通情况下 width 和 height 不容易直接生效

你可以把它理解成“文字流中的一部分”。

例如：

<span>我是 span</span>
<a href="#">我是链接</a>
<strong>我是强调</strong>

它们更像句子里的某个词，而不是一个完整区块。

3. 一定要记住：元素不是天生块级或行内

这是非常重要的一点。

很多教程会直接说：

  • div 是块级元素
  • span 是行内元素

这句话方便记忆，但不够严谨。

更准确的说法应该是：

  • div 默认是块级元素
  • span 默认是行内元素

因为我们完全可以通过 CSS 改变它：

span {
  display: block;
}

div {
  display: inline;
}

所以，本质上“块级 / 行内”并不是元素的天生属性，而是它默认的 display 表现。

三、常见块级元素和行内元素

1. 常见块级元素

下面这些元素默认通常都是块级：

<div>
<p>
<h1> ~ <h6>
<ul>
<ol>
<li>
<section>
<article>
<aside>
<header>
<footer>
<nav>
<main>
<form>
<fieldset>
<pre>
<blockquote>
<hr>

其中开发里最常见的是：

  • div
  • p
  • h1 ~ h6
  • ul / ol / li
  • section
  • article
  • header
  • footer
  • nav
  • main
  • form

2. 常见行内元素

下面这些元素默认通常都是行内：

<span>
<a>
<strong>
<em>
<b>
<i>
<u>
<small>
<mark>
<sub>
<sup>
<label>
<code>
<abbr>
<cite>
<time>

其中最常见的是：

  • span
  • a
  • strong
  • em
  • label
  • code

3. 一些特殊元素

有一些元素不能简单粗暴地归到“普通行内元素”里，比如：

  • img
  • input
  • button
  • select
  • textarea

它们往往也能和文本在一行显示，但又常常可以设置宽高。

这类元素和 span 那种纯行内元素不完全一样，属于更特殊的情况。

初学阶段先知道这一点就够了：
不是所有看起来在一行里的元素，行为都和 span 一样。

四、最常见的几种 display

真正开发里，最重要的 display 其实就是这几个：

  • block
  • inline
  • inline-block
  • none
  • flex
  • inline-flex
  • grid
  • inline-grid

下面一个个讲清楚。

1. display: block

block 表示元素按块级方式显示。

特点：

  • 独占一行
  • 可以设置宽高
  • 可以设置四个方向的 margin 和 padding
  • 默认宽度会尽量占满父容器

示例：

.box {
  display: block;
  width: 200px;
  height: 100px;
}

适合场景：

  • 页面大区块
  • 容器
  • 段落
  • 结构区域

2. display: inline

inline 表示元素按行内方式显示。

特点：

  • 不独占一行
  • 和文字在一行里排列
  • 宽度通常由内容决定
  • 普通情况下 width、height 不容易直接生效
  • 左右方向的 margin/padding 比较明显
  • 上下方向效果不如块级直观

示例：

span {
  display: inline;
}

适合场景：

  • 文本中的局部修饰
  • 行内强调
  • 小范围内容嵌入

3. display: inline-block

这是很多初学者最容易“突然开窍”的一个值。

它的特点可以总结成一句话：

像行内元素一样排队，像块级元素一样能设置宽高。

特点：

  • 不独占一行
  • 可以和其他元素排在同一行
  • 可以设置 width 和 height
  • 可以设置完整盒模型

示例：

.item {
  display: inline-block;
  width: 120px;
  height: 40px;
}

适合场景：

  • 一排按钮
  • 一排小卡片
  • 既想并排，又想控尺寸的元素

4. display: none

这个值表示：

元素完全不显示，也不占位置。

示例：

.hidden {
  display: none;
}

特点：

  • 不显示
  • 不占布局空间
  • 就像它不存在一样

注意，它和下面两个不一样：

visibility: hidden;
opacity: 0;

区别：

  • display: none：不显示，也不占位
  • visibility: hidden：不显示，但还占位
  • opacity: 0：透明了，但还在页面中占位

5. display: flex

flex 是现代布局里非常常用的方式。

它的重点不是“让自己变成横向”，而是：

让自己成为 flex 容器，里面的子元素按 flex 规则排列。

示例：

.container {
  display: flex;
}

默认情况下：

  • 子元素会横向排列
  • 可以通过 justify-content 控制主轴对齐
  • 可以通过 align-items 控制交叉轴对齐
  • 可以通过 gap 控制间距

适合场景：

  • 导航栏
  • 按钮组
  • 居中布局
  • 一维排列（一行或一列）

6. display: inline-flex

它和 flex 的内部布局一样，区别只在外部表现：

  • flex：容器本身更像块级
  • inline-flex：容器本身更像行内

示例：

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

适合场景：

  • 标签组件
  • 小型行内组合元素
  • 想嵌在文本中但内部还要灵活排版的内容

7. display: grid

grid 用于二维布局。

它不仅能控制横向，还能控制纵向，是一种网格布局。

示例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

适合场景：

  • 卡片墙
  • 后台面板
  • 复杂二维布局
  • 同时要控制行和列的情况

8. display: inline-grid

和 inline-flex 类似：

  • 外部表现像行内
  • 内部布局用 grid

五、block、inline、inline-block 的核心区别

这是最核心的一组。

属性blockinlineinline-block
是否独占一行是否否
是否可设置宽高是通常不行是
默认宽度尽量撑满父容器由内容决定由内容决定
是否适合并排不适合适合适合
是否适合做小模块一般不适合很适合

最简单的理解方式

block

像一个大盒子，占一整行。

inline

像文字中的一个词，不单独占行。

inline-block

像一个能并排的小盒子。

一个例子直接看懂

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
情况 1：display: block
.a, .b, .c {
  display: block;
  width: 100px;
  height: 50px;
}

结果：A、B、C 各占一行。

情况 2：display: inline
.a, .b, .c {
  display: inline;
}

结果：A、B、C 会排在同一行，但宽高不容易控制。

情况 3：display: inline-block
.a, .b, .c {
  display: inline-block;
  width: 100px;
  height: 50px;
}

结果：A、B、C 在同一行，而且每个都能控制宽高。

六、flex 和 grid 到底改变了什么

很多人学到这里会误解：

display: flex 是不是让这个元素“变横着”？

不完全对。

更准确地说：

display: flex 改变的是这个元素内部子元素的排列方式。

1. flex 适合一维布局

所谓一维布局，就是主要处理一个方向：

  • 一行
  • 或一列

比如：

  • 水平排一排按钮
  • 垂直排一列菜单
  • 居中对齐一个模块

示例：

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

2. grid 适合二维布局

二维布局就是：

  • 不只控制横向
  • 也要控制纵向

比如：

  • 3 列卡片列表
  • 后台数据面板
  • 多行多列布局

示例：

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

3. 怎么选

适合用 flex 的场景
  • 导航栏
  • 按钮组
  • 居中对齐
  • 一行排布
  • 一列排布
适合用 grid 的场景
  • 卡片墙
  • 图片列表
  • 复杂面板
  • 同时控制行和列

一句话总结：

  • 一维布局用 flex
  • 二维布局用 grid

七、几个最容易混淆的点

1. flex 改变的是子元素，不是兄弟元素

很多人写：

.item {
  display: flex;
}

然后以为多个 .item 会横向排列。

其实不会。

display: flex 让 .item 的子元素按 flex 规则排列，而不是让 .item 和其他兄弟自动横排。

如果你想让多个 .item 横排，应该给它们的父元素设置：

.parent {
  display: flex;
}

2. inline-block 不是 flex 的替代品

inline-block 只是让元素本身能够：

  • 并排
  • 有宽高

但它不会像 flex 一样强大地控制子元素对齐、分布、拉伸。

所以：

  • 简单并排小模块：可以用 inline-block
  • 复杂对齐布局：优先用 flex

3. display: none 不等于 opacity: 0

这三个一定要区分：

display: none
  • 不显示
  • 不占位置
visibility: hidden
  • 不显示
  • 占位置
opacity: 0
  • 看不见
  • 还占位置
  • 某些情况下仍可交互

4. 行内元素不是都不能设置宽高

这点最容易让初学者困惑。

比如：

  • span 一般不容易直接控制宽高
  • 但 img、input、button 往往又可以

所以不要简单记成：

行内元素都不能设置宽高

更准确地说应该是：

普通非替换行内元素通常不适合直接设置宽高。

初学阶段记到这里就够用了。

八、真实开发中怎么选

场景 1：页面结构区块

.section {
  display: block;
}

适合：

  • 页面模块
  • 大容器
  • 区域划分

场景 2：一句话中的局部样式

.highlight {
  display: inline;
}

适合：

  • 文本高亮
  • 行内强调
  • 句子中的局部修饰

场景 3：一排按钮，每个按钮都要可控尺寸

.button {
  display: inline-block;
  width: 100px;
  height: 40px;
}

适合：

  • 按钮
  • 标签
  • 小模块横排

不过现代开发里，更常见写法其实是给父元素用 flex。

场景 4：导航栏、水平排列、垂直居中

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

适合：

  • 导航
  • 头部布局
  • 按钮组
  • 居中对齐

场景 5：卡片列表、后台面板、二维排布

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

适合：

  • 多列布局
  • 卡片墙
  • 图片网格
  • 仪表盘

场景 6：临时隐藏元素

.hidden {
  display: none;
}

适合：

  • 条件渲染
  • 折叠内容
  • 状态切换

九、一张表总结所有重点

display 值是否独占一行是否可设置宽高子元素布局方式适合场景
block是是普通文档流大区块、容器
inline否通常不行普通文档流文本局部
inline-block否是普通文档流小模块并排
none不显示不适用不参与布局隐藏元素
flex通常是是flex一维布局
inline-flex否是flex行内 flex 组件
grid通常是是grid二维布局
inline-grid否是grid行内 grid 组件

十、结论

如果要真正搞懂 display，最重要的不是记住所有值，而是记住这两个核心问题：

  1. 这个元素自己在外面怎么显示
  2. 这个元素里面的子元素怎么排列

只要你围绕这两个问题去理解，display 就不会乱。

最后再用一句最精炼的话总结：

  • block：像一个区块，独占一行
  • inline：像文字的一部分，不独占一行
  • inline-block：能并排，也能设宽高
  • flex：擅长一维布局
  • grid：擅长二维布局
  • none：直接不显示、不占位

额外补一句

对于初学者来说，最值得先彻底吃透的是这 6 个：

  • block
  • inline
  • inline-block
  • none
  • flex
  • grid

把这几个真正搞明白，日常开发里大部分布局问题都能解决。

avatar
文章
阅读
粉丝