CSS - 显示属性：视觉魔法的门户！

你好，未来的CSS法师们！? 我很兴奋能和你们一起踏上这段旅程，探索CSS display 属性的迷人世界。作为一个教授CSS超过十年的人，我可以向你保证，掌握这个属性就像打开了一个装满网页设计可能性的宝箱。那么，让我们开始吧！

显示属性是什么？

在我们深入了解之前，让我们先了解一下 display 属性到底做什么。简单来说，它控制元素如何在网页上显示。把它想象成戏剧的导演，告诉每个演员（元素）如何在舞台上（你的网页）表现。

可能的值

display 属性就像瑞士军刀 - 它有适用于不同情况的多种工具（值）。以下是我们将要讨论的最常见值的表格：

值	描述
inline	将元素显示为内联元素（如 <span>）
block	将元素显示为块级元素（如 <div>）
inline-block	将元素显示为内联级别的块容器
none	元素完全从文档中移除
flex	将元素显示为块级弹性容器
inline-flex	将元素显示为内联级别的弹性容器
grid	将元素显示为块级网格容器
inline-grid	将元素显示为内联级别的网格容器
table	让元素表现得像 <table> 元素
list-item	让元素表现得像 <li> 元素

应用范围

display 属性适用于所有HTML元素。是的，你没听错 - 所有元素！从微不足道的 <span> 到强大的 <div>，每个元素都可以受到这个强大属性的影响。

DOM 语法

当使用JavaScript和文档对象模型（DOM）时，你可以这样操作 display 属性：

element.style.display = "value";

例如：

document.getElementById("myElement").style.display = "none";

这将隐藏ID为 "myElement" 的元素。魔法，对吧？

CSS display - inline 值

让我们从 inline 值开始。这是 <span>、<a> 和 <img> 等元素的默认值。

<style>
.inline-element {
display: inline;
background-color: yellow;
padding: 5px;
}
</style>

<p>这个段落中有一个 <span class="inline-element">内联元素</span>。</p>

在这个例子中，<span> 元素将随着文本流动，不会从新的一行开始。它就像句子中的一个词 - 不会打断流程。

CSS display - block 值

接下来是 block 值。这是 <div>、<p> 和 <h1> 到 <h6> 等元素的默认值。

<style>
.block-element {
display: block;
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
</style>

<div class="block-element">这是一个块级元素。</div>
<div class="block-element">这是另一个块级元素。</div>

块级元素从新的一行开始，并延伸到可用的全部宽度。它们就像书中的段落 - 每个段落都是从新的一行开始。

CSS display - inline-block 值

inline-block 值是一种混合体 - 它结合了 inline 和 block 的特性。

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 5px;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

这些元素将并排放置（像 inline），但你可以设置它们的宽度和高度（像 block）。这对于创建类似网格的布局而无需使用实际的网格或弹性布局非常完美。

CSS display - none 值

none 值就像给元素施加了一个隐身斗篷。

<style>
.hidden {
display: none;
}
</style>

<p>你可以看到这个段落。</p>
<p class="hidden">但你看不到这个！</p>

具有 display: none 的元素完全从布局中移除。就像它们根本不存在于页面一样。

CSS display - table 值

CSS可以让元素表现得像表格元素，即使它们不是实际的 <table> 标签。

<style>
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid black;
padding: 5px;
}
</style>

<div class="table">
<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>

这创建了一个类似表格的结构，而无需使用实际的表格元素。这对于创建需要表现得像表格的布局但具有更多灵活性非常棒。

CSS display - flex 值

Flexbox是一个强大的布局工具，它从 display: flex 开始。

<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: lightgray;
}
.flex-item {
background-color: white;
margin: 10px;
padding: 20px;
}
</style>

<div class="flex-container">
<div class="flex-item">Flex 项目 1</div>
<div class="flex-item">Flex 项目 2</div>
<div class="flex-item">Flex 项目 3</div>
</div>

这创建了一个灵活的容器，其中的项目可以轻松对齐和分布。就像拥有一群可以完美伸展和收缩的体操运动员。

CSS display - inline-flex 值

inline-flex 与 flex 类似，但容器本身表现得像内联元素。

<style>
.inline-flex-container {
display: inline-flex;
background-color: lightpink;
}
.flex-item {
margin: 5px;
padding: 10px;
background-color: white;
}
</style>

<div class="inline-flex-container">
<div class="flex-item">项目 1</div>
<div class="flex-item">项目 2</div>
</div>
<div class="inline-flex-container">
<div class="flex-item">项目 3</div>
<div class="flex-item">项目 4</div>
</div>

这允许你在同一行上有多个flex容器，这对于创建复杂的布局非常有用。

CSS display - grid 值

Grid是另一个强大的布局工具，从 display: grid 开始。

<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightblue;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 20px;
text-align: center;
}
</style>

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

Grid允许你创建具有行和列的复杂布局。就像为你的元素拥有一个完美的电子表格！

CSS display - inline-grid 值

与 inline-flex 类似，inline-grid 创建一个表现得像内联元素的网格容器。

<style>
.inline-grid-container {
display: inline-grid;
grid-template-columns: auto auto;
gap: 10px;
background-color: lightyellow;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 10px;
text-align: center;
}
</style>

<div class="inline-grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
</div>
<div class="inline-grid-container">
<div class="grid-item">C</div>
<div class="grid-item">D</div>
</div>

这允许你在同一行上有多个网格容器，为布局提供了更多的可能性。

CSS display - list-item 值

最后，我们有了 list-item，它让元素表现得像列表项。

<style>
.custom-list {
display: list-item;
list-style-type: square;
margin-left: 20px;
}
</style>

<div class="custom-list">这是一个自定义列表项</div>
<div class="custom-list">这是另一个自定义列表项</div>

当你想创建列表结构但无需使用实际的 <ul> 或 <ol> 元素时，这很有用。

就这样，朋友们！我们一起穿越了 display 属性的土地，从谦逊的 inline 到强大的 grid。记住，掌握CSS的关键是练习。所以，去尝试这些属性吧。谁知道呢？你可能会创造出下一个网页设计的大热门！

快乐编码，愿你的布局总是像素完美！??

Credits: Image by storyset