4.内联块：两全其美

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

示例：

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

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

5.显示隐藏元素：无

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

示例：

.hidden-box {
    display: none;
}

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

6.其他显示值

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

• flex：将元素变成灵活的容器，允许对其子元素进行更多控制（我们将在后面的讲座中详细讨论这一点）。
• 网格：为容器启用网格布局，允许子元素按行和列排列（也会在以后的讲座中介绍）。

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 上关注我

里多伊·哈桑

理论要掌握，实操不能落！以上关于《CSS 显示 – 控制元素的布局行为》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！