html中display

作者：热血震荡发布日期:2025-05-23 浏览:47

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

        .inline {
            display: inline; /* 作为行内元素显示，不会独占一行 */
            padding: 5px;
            background-color: lightcoral;
        }

        .none {
            display: none; /* 不显示元素，占据的空间也会消失 */
        }

        .flex-container {
            display: flex; /* 使用弹性布局 */
            background-color: lightgreen;
        }

        .flex-item {
            margin: 10px;
            padding: 20px;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <div class="block">这是一个块级元素</div>
    <p>这是段落文本，<span class="inline">这是行内元素</span>。</p>
    <div class="none">这个元素不会显示</div>

    <div class="flex-container">
        <div class="flex-item">项目1</div>
        <div class="flex-item">项目2</div>
        <div class="flex-item">项目3</div>
    </div>
</body>
</html>

解释说明：

display: block;：将元素作为块级元素显示，默认独占一行。
display: inline;：将元素作为行内元素显示，不独占一行，与文本或其他行内元素并排显示。
display: none;：隐藏元素，并且该元素不会占据任何空间。
display: flex;：使用弹性布局（Flexbox），使得子元素可以根据容器的大小进行灵活排列。

上一篇：登录页面html模板

下一篇：表格html