标准文档流（块元素、行元素、行内块元素）

正在修炼web的小芮

于 2022-07-05 11:46:43 发布

阅读量152

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_71814235/article/details/125616666

版权

本文介绍了CSS中的三种元素类型：块元素、行元素和行内块元素。块元素独占一行，可设置宽高，默认宽度为父元素100%；行元素与其他行内元素并排，无法设置宽高；行内块元素则能并排显示且可设置宽高，例如img标签。

摘要由CSDN通过智能技术生成

块元素

特点：

● 霸占一行，不能与其他任何元素并列。

● 能接受宽、高。

● 如果不设置宽度，那么宽度将默认变为父亲的100%（也就是我们平时说的通栏）

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /* 高度已设置，宽度不设置，则宽度100%，即通栏 */
            height: 50px;
            color: aqua;
        }
        .box1{
            background-color: blueviolet;
        }
        .box2{
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <!-- 自上而下渲染
    <div>
       1
    </div>
    <div>
       自左到右渲染
        2 
        <a href=""></a><em></em>
    </div> -->

    <div class="box box1">123</div>
    <div class="box box2">456</div>
</body>

预览效果图