第 12 讲：css 显示 - 控制元素的布局行为

在本次讲座中，我们将讨论最重要的 css 属性之一：display。 display 属性控制元素的布局行为，确定它们在页面上的相互渲染方式。

1.了解显示属性

display 属性定义元素在布局中的行为方式。它控制元素是否显示为块级元素、内联元素或两者都不是。

基本语法：

element {    display: value;}

2.常用显示值

以下是一些最常用的显示值以及它们如何影响元素：

示例：

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

.block-item {    display: block;    background-color: #4caf50;    margin-bottom: 10px;}.inline-item {    display: inline;    background-color: #ff5722;}.inline-block-item {    display: inline-block;    background-color: #2196f3;    padding: 10px;}

在此示例中：

3.块元素与内联元素

块元素（例如

、

等）自然会占据其容器的整个宽度并另起一行。您可以控制它们的宽度、高度、边距和填充。

内联元素（如 、、 等）仅占用必要的空间并保留在文本流中。您无法设置内联元素的宽度或高度。

4.内联块：两全其美

inline-block 值结合了内联元素和块元素的优点。您可以将元素放置在同一行，同时仍然控制它们的宽度和高度。

示例：

.inline-box {    display: inline-block;    width: 100px;    height: 100px;    background-color: #ffc107;    margin: 5px;}

这允许您创建类似网格的布局或并排元素，而无需强制它们占据整个宽度。

5.显示隐藏元素：无

当您将元素的显示属性设置为 none 时，该元素根本不会被渲染 - 它会从文档中消失，并且不会为其保留空间。

示例：

.hidden-box {    display: none;}

这对于创建切换或根据某些条件应可见的元素非常有用。

6.其他显示值

还有其他更高级布局的显示值，例如：

7.实际例子：

这是一个结合使用 block、inline 和 inline-block 的实际示例：

<div class="block-item">this is a block element.</div><span class="inline-item">this is an inline element.</span><div class="inline-block-item">this is an inline-block element.</div>

.block-item {    display: block;    width: 100%;    background-color: #4CAF50;    color: white;}.inline-item {    display: inline;    background-color: #FF5722;    padding: 5px;    color: white;}.inline-block-item {    display: inline-block;    width: 200px;    height: 50px;    background-color: #2196F3;    margin: 5px;    color: white;}

此示例演示如何使用元素的不同显示属性来控制布局和间距。

结论

display 属性是 css 中最强大的工具之一。了解 block、inline、inline-block 和 none 之间的差异可以让您更好地控制元素在页面上的布局方式。

在 linkedin 上关注我

里多伊·哈桑