css文档流

最新推荐文章于 2024-03-11 16:15:57 发布

charliegogh

最新推荐文章于 2024-03-11 16:15:57 发布

阅读量210

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/Cl_429/article/details/79219601

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

”文档“指的是内容，就是所写页面内容，”流“则是一种文档内容的显示规则。

该规则就是，块级元素单独占一行，内敛元素则可以多个元素占一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box-1{
            float: left;
            width: 150px;
            height: 150px;
            background: red;
        }
        .box-2{
            width: 200px;
            height: 200px;
            background: gray;
        }
        </style>
</head>
<body>
<div class="box-1">


</div>
<div class="box-2">


</div>


</body>
</html>

一、脱离文档流

有些元素天生不占据文档流，比如隐藏元素。

也可以使一个元素强行脱离文档流，比如让元素浮动起来或者使用绝对定位等方式。

box-1脱离了原来的文档流，那么它原来的位置将会被它后面的文档流中的元素所占据。

二、总结

可以把文档流形象的比喻为马路上的车流。假设有些车太宽了只能占据一行，那就是块级元素，

有的车比较瘦小，可以并排行驶就是内联元素。在这些车流中可能有超级富二代，他们的车可能

是空路两用的，可以飞起来，这些车起飞之后在马路上空飞行就相当于元素脱离了文档流，其他

车辆可以填补起飞车辆的位置。

charliegogh

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css文档流

”文档“指的是内容，就是所写页面内容，”流“则是一种文档内容的显示规则。该规则就是，块级元素单独占一行，内敛元素则可以多个元素占一行。html>lang="en"> charset="UTF-8"> Title .box-1{ float: left; width: 150px;
复制链接

扫一扫

专栏目录