什么是文档流？文档的流的概念与缺陷

冰冻果冻

于 2024-10-11 21:40:39 发布

阅读量156

点赞数 2

文章标签：前端 css html

本文链接：https://blog.csdn.net/2401_85545586/article/details/142861953

版权

一、文档流的概念

文档流（Document Flow）是网页布局中的一个重要概念，描述了元素在页面上按照从上到下、从左到右的顺序依次排列的方式。文档流是网页中元素默认的排列方式，也是浏览器渲染引擎根据HTML文档的结构和CSS规则来确定元素位置的基础。

文档流的特点包括：

元素按照从上到下、从左到右的顺序排列，形成一个整体流动的布局。
元素在宽度不足时会自动换行，换行时会尽量紧凑排列。
元素的宽度默认是占满父容器的，除非设置了具体的宽度值或者使用了浮动或绝对定位等特殊布局方式。
元素的高度默认是根据内容的高度自动调整，可以通过CSS属性来控制元素的高度。
元素会相互排斥，不会重叠。

文档流对于网页布局的控制和调整非常重要，可以通过设置CSS属性来改变元素在文档流中的位置和布局方式，例如使用浮动、定位、flex布局等。同时，文档流也是响应式布局和流体布局的基础，可以根据浏览器窗口大小的变化自动调整元素的排列方式和布局。

普通文档流

运行代码：

 <style>
div{  width: 100px;
    height: 100px;
    background-color: blue;
    border: 2px red dashed;

}
    </style>
    
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
   
    
</body>
</html>

运行结果：

文档流的缺陷

文本空格折叠

运行代码：

  <style>
p{  
    font-size: 50px;
    font-family: 宋体;
}

    </style>
    
</head>
<body>
   <p >我是普通文本</p>
   <p>我是               普通文本</p>
    
</body>
</html>

运行结果：

元素间间隙过小

运行代码:

  <style>
#u1{  
    width: 100px;
    height: 100px;
    background-color: darkgrey;
    border: 10px red solid;
}

    </style>
    
</head>
<body>
   <img src="../图片/橘子.jpg" id="u1">
   <img src="../图片/橘子.jpg" id="u1">

    
</body>
</html>

运行结果：

元素布局摆放布局不灵活

运行代码：

#u1{  
    width: 100px;
    height: 100px;
    background-color: darkgrey;
    border: 10px red solid;
}

    </style>
    
</head>
<body>
   <img src="../图片/橘子.jpg" id="u1">
 
</body>
</html>

运行结果：