CSS快速入门手册

display

预计阅读时间1 分 59 views

1 作用

display 属性用于指定元素应该生成的框类型，以及如何处理元素的盒模型。通过设置 display 属性，可以改变元素在页面中的显示方式，例如将元素显示为块级元素、行内元素、或者是弹性盒子等。

2 语法

display 属性可以设置为多种值，常见的包括：

block：将元素显示为块级元素，会独占一行空间。
inline：将元素显示为行内元素，会与相邻元素在同一行内显示。
inline-block：将元素显示为行内块级元素，具有块级元素的盒模型特性，但会与相邻元素在同一行内显示。
none：隐藏元素，不会在页面中显示，并且不占据任何空间。
flex：将元素显示为弹性盒子。
grid：将元素显示为网格容器。

3 示例

下面是一个简单的 HTML 示例，展示了如何在元素上应用 display 属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Display Example</title>
    <style>
        /* 设置元素的 display 属性 */
        .block {
            display: block; /* 将元素显示为块级元素 */
            background-color: #f0f0f0;
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
        }

        .inline {
            display: inline; /* 将元素显示为行内元素 */
            background-color: #f0f0f0;
            padding: 5px;
            margin-right: 10px;
        }

        .inline-block {
            display: inline-block; /* 将元素显示为行内块级元素 */
            background-color: #f0f0f0;
            width: 100px;
            height: 100px;
            margin-right: 10px;
        }

        .none {
            display: none; /* 隐藏元素 */
        }
    </style>
</head>
<body>
    <div class="block"></div>
    <span class="inline">Inline</span>
    <div class="inline-block"></div>
    <div class="block"></div>
    <span class="inline">Inline</span>
    <div class="none">Hidden</div>
</body>
</html>

在这个示例中，创建了一些带有不同 display 属性的元素。.block 类表示块级元素，.inline 类表示行内元素，.inline-block 类表示行内块级元素，.none 类表示隐藏元素。你可以观察到不同 display 属性的效果。

display

1 作用

2 语法

3 示例

Leave a Comment 取消回复

内容