CSS Display

CSS display 是 CSS 中最重要的属性，用于控制元素的布局。它规定了元素的显示方式。

每个元素根据其性质都有一个默认的 display 值。网页上的每个元素都是一个矩形框，而 CSS 属性定义了这个矩形框的行为。

CSS Display 默认属性

语法

CSS display 值

以下是常用的 CSS display 值。

1. display: inline;
2. display: inline-block;
3. display: block;
4. display: run-in;
5. display: none;

1) CSS display inline

inline 元素只占用所需的宽度。它不会强制换行，因此文本流在 inline 示例中不会中断。

inline 元素有

• <span>
• <a>
• <em>
• <b> 等。

让我们看一个 CSS display inline 的例子。

输出

Hello tpointtech.com Java 教程。SQL 教程。HTML 教程。CSS 教程。

2) CSS display inline-block

CSS display inline-block 元素与 inline 元素非常相似，但不同之处在于您可以设置宽度和高度。

输出

Hello tpointtech.com Java 教程。 SQL 教程。 HTML 教程。 CSS 教程。

3) CSS display block

CSS display block 元素会占据尽可能多的水平空间。这意味着 block 元素会占据全部可用宽度。它们会在它们之前和之后产生换行。

输出

Hello tpointtech.com

Java 教程。

SQL 教程。

HTML 教程。

CSS 教程。

4) CSS display run-in

此属性在 Mozilla Firefox 中不起作用。这些元素本身不产生特定的框。

• 如果 run-in 框包含一个 block 框，它将与 block 相同。
• 如果 block 框跟随 run-in 框，则 run-in 框成为 block 框的第一个 inline 框。
• 如果 inline 框跟随 run-in 框，则 run-in 框成为一个 block 框。

输出

Hello tpointtech.com

Java 教程。

SQL 教程。

HTML 教程。

CSS 教程。

5) CSS display none

"none" 值会完全从页面中移除该元素。它不会占用任何空间。

输出

此标题可见。

您可以看到隐藏的标题不包含任何空间。

其他 CSS display 值