【前端25】文档流

前言

本文基于尚硅谷Web前端基础教程发布，你也可以理解成这是一篇尚硅谷教程笔记，当然这里也有我的一些经验总结

文档流

normal flow

我们所看到的网页其实是一层叠着一层的，这一点在之前的博文中也有讲过，我们用户看到的是最外面的部分其最里面的部分就叫做「文档流」它是网页的基础，其所有的网页都是在它的模型上建立的（这是一个概念问题）所以我们可以通过CSS为一层层文档流更改样式

一般在网页只有两个状态：在文档流和不在文档流中即脱离文档流。文档流是研究网页布局的，除了概念也有很多其他用法

特点

在块元素中

这里用div举例：

<div class="box1">我是div1</div>
<div class="box2">我是div2</div>
<style>
  .box1 {
    background-color: yellow;
  }
  .box2 {
    background-color: red;
  }
</style>

可以看到两个div是分别占两行的，也就是说div块元素是独占一行的，长条的宽度随屏幕的增大而增长，高度也就是字符高度，这条宽高是”贴身”的除非你去设置

在行内元素中

与块元素相反，行内元素不会自己换行只会一行中装不下后自己换到另一行，背景样式同样是”贴身”的，默认高度和宽度会被水平撑开。

什么叫水平撑开呢？就是你去把div也好，span也好他们内的文字删去你就发现这个样式也没有了，背景样式全靠文字撑开

这一期也没啥好讲的，不过是平常司空见惯的东西用文字表达出来了