Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

html里面display

作者:翔龙天下   发布日期:2025-03-11   浏览:312

<!DOCTYPE html>
<html>
<head>
    <title>HTML Display 示例</title>
    <style>
        /* display 属性定义元素应该生成的框的类型 */
        .block {
            display: block;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }

        .inline {
            display: inline;
            background-color: lightcoral;
        }

        .none {
            display: none;
        }

        .flex-container {
            display: flex;
            background-color: lightgreen;
        }

        .flex-item {
            flex: 1;
            margin: 5px;
            background-color: lightyellow;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <h2>display: block;</h2>
    <div class="block">这是一个块级元素。</div>

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

    <h2>display: none;</h2>
    <p>这个段落下面有一个 display 设置为 none 的元素,所以你看不到它。</p>
    <div class="none">你不会看到我。</div>

    <h2>display: flex;</h2>
    <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 rem

下一篇:html 空格代码

大家都在看

静态html源码

ios打开html

colspan在html中是什么意思

xml转html

html时间代码

html2canvas使用

html标题标签是什么

html 换行符号

html中b标签的作用

html美化代码

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站