CSS-标准文档流（Normal Flow）

最新推荐文章于 2024-12-14 19:06:31 发布

原创最新推荐文章于 2024-12-14 19:06:31 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#文档流

H5 专栏收录该内容

1 篇文章

订阅专栏

本文深入解析了网页布局中的文档流概念，包括内联与块级元素的默认布局行为，探讨了脱离文档流的方法，如float、absolute及fixed定位，以及相对定位对页面布局的影响。

1 定义

文档流中：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。

2 脱离文档流

文档一旦脱离文档流，则元素不再按照文档流的排列方式进行排列，如块级元素脱离文档流后，该块级元素不再接着上个元素从上到下排列，而是成为第一个元素，从顶部开始排列。

脱离文档流的方法：

float:left
position:absolute;
position:fixed

文档流布局如图2.1：

在这里插入图片描述

图2.1 文档流布局

以上是块级元素按照从上到下的排列方式进行排列，当其使用下列类选择器脱离文档流后，布局如2.2所示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class = "box">
    <div class = "children v1">
      hello
    </div>
    <div class = "children v2">
      ni hao
    </div>
    <div class = "children v3">
      zai jian
    </div>
  </div>
</body>
</html>

.box {
  border: 5px solid red;
}
.children {
  border: 1px solid green;
  width: 100px;
  padding: 10px;
  margin: 10px;
}
/*.v1,.v2,.v3{
  float: left;
}
.v1 {
  position: absolute;
}*/
.v1 {
  position: fixed;
}

在这里插入图片描述

图2.2 脱离文档流

如图2.2所示，原先第2个块级元素脱离文档流后和第一个块级元素重叠了，其父元素高度不再包含该元素高度

3 相对定位

相对定位relative对父元素的高度无影响

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class = "box">
    <div class = "son v1">hello</div>
    <div class = "son v2">hello</div>
    <div class = "son v3">hello</div>
  </div>
</body>
</html>

.box {
  border: 1px solid red;
}
.son {
  width: 100px;
  border: 1px solid green;
  padding: 5px;
  margin: 10px;
}
.v1 {
  position: relative;
  top: 20px;
  background: yellow;
}
.v2 {
  background: blue;
}