html的display属性

作者：缺爱╮不缺钙发布日期:2025-11-12 浏览:105

<!DOCTYPE html>
<html>
<head>
    <title>HTML display 属性示例</title>
    <style>
        .block {
            display: block;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }

        .inline {
            display: inline;
            background-color: lightcoral;
            padding: 5px;
        }

        .none {
            display: none;
            background-color: lightgreen;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h2>display: block;</h2>
    <div class="block"></div>

    <h2>display: inline;</h2>
    <span class="inline">这是一个 inline 元素。</span>
    <span class="inline">这是另一个 inline 元素。</span>

    <h2>display: none;</h2>
    <p class="none">这个元素被隐藏了。</p>
</body>
</html>

解释说明：

display: block;：将元素显示为块级元素，独占一行，并且可以设置宽度和高度。
display: inline;：将元素显示为内联元素，不会独占一行，不能设置宽度和高度。
display: none;：完全隐藏元素，页面布局中不会为该元素保留空间。

上一篇：html自动跳转

下一篇：html