display在html是什么意思

作者：佳凝皓月发布日期:2025-10-10 浏览:20

<!DOCTYPE html>
<html>
<head>
    <title>Display 示例</title>
    <style>
        /* display 属性定义了元素生成的框的类型 */
        .block {
            display: block; /* 该元素将作为一个块级元素显示，独占一行 */
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .inline {
            display: inline; /* 该元素将作为一个内联元素显示，不会独占一行 */
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .none {
            display: none; /* 该元素将不被显示，也不会占用空间 */
        }
    </style>
</head>
<body>
    <div class="block"></div>
    <p>这是一个文本。</p>
    <span class="inline"></span>
    <div class="none">这个元素不会显示</div>
</body>
</html>

解释说明：

display: block;：使元素作为块级元素显示，块级元素会独占一行，如 <div>、<p> 等。
display: inline;：使元素作为内联元素显示，内联元素不会独占一行，如 <span>、<a> 等。
display: none;：使元素完全不显示，并且不会占用任何空间。

上一篇：html svg标签

下一篇：html font