html中display是什么意思

作者：无声飞雪发布日期:2026-04-09 浏览:58

<!DOCTYPE html>
<html>
<head>
    <title>Display 示例</title>
    <style>
        .block {
            display: block;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .inline {
            display: inline;
            background-color: lightcoral;
        }
        .none {
            display: none;
        }
    </style>
</head>
<body>
    <div class="block">这是一个块级元素 (display: block)</div>
    <p>这是一段文本，<span class="inline">这是行内元素 (display: inline)</span>。</p>
    <div class="none">这个元素不可见 (display: none)</div>

    <p>解释说明：</p>
    <ul>
        <li><code>display: block;</code>：块级元素，独占一行，可以设置宽度和高度。</li>
        <li><code>display: inline;</code>：行内元素，不会独占一行，不能设置宽度和高度。</li>
        <li><code>display: none;</code>：元素不显示，并且不会占据任何空间。</li>
    </ul>
</body>
</html>

上一篇：html 文本框

下一篇：html颜色选择器