CSS display 语法
在 CSS 中，display 属性用于设置元素的显示类型。它决定了元素是如何生成其盒模型以及如何参与布局。
语法：
display: 关键字;说明：
display 的取值有非常多，常用的如下表所示。
| 取值 | 说明 |
|---|---|
| none | 将元素隐藏 |
| inline | 将元素显示为 “行内元素” |
| block | 将元素显示为 “块级元素” |
| inline-block | 将元素显示为 “行内块元素” |
| flex | 将元素显示为 “弹性容器” |
| inline-flex | 将元素显示为 “行内弹性容器” |
| grid | 将元素显示为 “网格容器” |
| inline-grid | 将元素显示为 “行内网格容器” |
| table | 将元素显示为块级表格 |
| inline-table | 将元素显示为行内表格 |
| table-cell | 将元素显示为表格单元格 |
| table-row | 将元素显示为表格行 |
| list-item | 将元素显示为列表项 |
对于 display 属性，小伙伴们要清楚以下几点。
- display 属性是 CSS 中最重要的布局属性之一。理解不同 display 值的行为对于构建网页布局非常重要。
- display: none; 会完全移除元素，而 visibility: hidden; 只是隐藏元素但保留其空间。
- 每个 HTML 元素都有一个默认的 display 值。例如，div 和 p 的默认值是 block，而 span 和 a 的默认值是 inline，li 的默认值是 list-item。
CSS display 摘要
| 属于 | CSS 盒子模型 |
|---|---|
| 使用频率 | 极高 |
| 是否继承 | 否 |
| 默认值 | 取决于元素类型 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS display 示例
接下来，我们通过几个简单的例子来讲解一下 CSS display 属性是如何使用的。
示例 1：inline、block 和 inline-block 的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.block-box {
display: block;
width: 100px;
height: 50px;
background-color: lightskyblue;
margin: 10px;
}
.inline-box {
display: inline;
width: 100px; /* 无效 */
height: 50px; /* 无效 */
background-color: lightseagreen;
margin: 10px; /* 垂直 margin 无效 */
}
.inline-block-box {
display: inline-block;
width: 100px;
height: 50px;
background-color: lightcoral;
margin: 10px;
}
</style>
</head>
<body>
<div class="block-box">block</div>
<span class="inline-box">inline</span>
<span class="inline-box">inline</span>
<div class="inline-block-box">inline-block</div>
<div class="inline-block-box">inline-block</div>
</body>
</html>页面效果如下图所示。
分析：
从结果可以看出，block 元素会独占一行，并且排斥其他元素。inline 元素会与其他 inline 元素并排排列，并且忽略了宽度、高度以及垂直外边距的设置。inline-block 元素会与其他 inline、inline-block 元素并排排列，但可以设置宽度、高度和完整的内外边距。
示例 2：使用 display: none; 隐藏元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 100px;
height: 50px;
background-color: lightblue;
margin: 10px;
}
.box2 {
display: none; /* 完全隐藏元素 */
}
.box3 {
width: 100px;
height: 50px;
background-color: lightgreen;
margin: 10px;
}
</style>
</head>
<body>
<div class="box1">可见元素 A</div>
<div class="box2">隐藏元素</div>
<div class="box3">可见元素 B</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们给 box2 设置了 display: none;，这样会使得该元素及其内容完全不显示，并且在布局中不再占据任何空间。因此从页面效果可以看到，“可见元素” 后面直接跟着 “可见元素B”，中间是没有任何间隔的。
示例 3：使用 display: flex; 创建弹性布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: flex; /* 设置为弹性容器 */
justify-content:space-evenly; /* 子元素在主轴上平均分布 */
background-color: lightskyblue;
padding: 10px;
margin: 20px;
}
.item {
width: 80px;
height: 50px;
background-color: hotpink;
margin: 5px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">首页</div>
<div class="item">教程</div>
<div class="item">关于</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们为 .container 元素设置了 display: flex;，此时它会成为一个弹性容器，然后其内部的子元素都会成为弹性子项。
然后由于还给 .container 元素设置了 justify-content: space-evenly;，其内部子元素会按照弹性布局的规则进行平均分布。
示例 4：使用 display: grid; 创建网格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: grid; /* 设置为网格容器 */
grid-template-columns: 100px 100px auto; /* 定义三列的宽度 */
grid-template-rows: 50px 50px; /* 定义两行的高度 */
gap: 10px; /* 设置网格间距 */
padding: 10px;
margin: 20px;
border: 1px solid gray;
}
.item {
background-color: lightcoral;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们为 .container 元素设置了 display: grid;，此时它会成为一个网格容器，其直接子元素会自动成为网格子项，并按照定义的网格结构进行排列。
其中 grid-template-columns 和 grid-template-rows 这两个属性用于定义网格的列和行结构，gap 属性用于设置网格项之间的间距。
提示: 弹性布局（display: flex;）和网格布局（display: flex;）的内容非常复杂，如果小伙伴们想要深入了解，建议到 “CSS 属性” 手册中把相关的每一个属性都看一遍。
示例 5：使用 display: table; 创建表格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.table-container {
display: table; /* 模拟表格 */
width: 300px;
border: 1px solid silver;
margin: 20px;
}
.table-row {
display: table-row; /* 模拟表格行 */
}
.table-cell {
display: table-cell; /* 模拟表格单元格 */
border: 1px solid silver;
padding: 10px;
text-align: center;
vertical-align: middle; /* 垂直居中文本 */
}
</style>
</head>
<body>
<div class="table-container">
<div class="table-row">
<div class="table-cell">header 1</div>
<div class="table-cell">header 2</div>
</div>
<div class="table-row">
<div class="table-cell">数据 1</div>
<div class="table-cell">数据 2</div>
</div>
<div class="table-row">
<div class="table-cell">数据 3</div>
<div class="table-cell">数据 4</div>
</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
虽然在现代布局中，我们更推荐使用 flex 布局或 grid 布局，但有些特殊情况下使用 display: table; 及其相关值来模拟简单的表格布局也是可行的。
在这个例子中将容器设置为 display: table;，内部的子元素设置为 display: table-row; 来模拟行，行的子元素设置为 display: table-cell; 来模拟单元格。这会使得元素产生类似于 HTML 表格元素的布局行为。
