CSS标准文档流与脱离文档流

曾经终败给现在 2023-01-05 03:57 159阅读 0赞

#### 标准文档流 ####

**文档流**：指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

#### 标准流的微观现象： ####

*  **空白折叠现象**：  
    在 html 文件输入文本，多个空格会被合并成一个空格显示到浏览器页面中。这种现象称为空白折叠现象。
 *  **高矮不齐，底边对齐**：  
    文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐；
 *  **自动换行，一行写不完时，换行写**：  
    如果在一行内写文字过多，超过界面，那么浏览器会自动换行去显示我们的文字。

#### 标准文档流等级 ####

分为两种等级：块级元素和行内元素；

**块级元素：**

*  霸占一行，不能与其他任何元素并列
 *  能接受宽、高
 *  如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽

**行内元素：**

*  与其他元素并排
 *  不能设置宽、高。默认的宽度就是文字的宽度

在HTML中，标签分为：文本级和容器级；  
文本级：p、span、a、b、i、u、em  
容器级：div、h系列、li、dt、dd

CSS的分类和上面的很像，就p不一样：所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。所有的容器级标签都是块级元素。

#### 块级元素与行内元素的相互转换 ####

块级元素可以设置为行内元素；行内元素也可以设置为块级元素。  
举个例子：

div {
      display: inline;
      background-color: pink;
      width: 400px;
      height: 400px;
    }

display是显示模式，用来改变元素的行内、块级性质inline就是“行内”，一旦给一个标签设置display:inline;  
那么这个标签立即变为行内元素。

*  此时div和span没有什么区别;
 *  此时的div不能设置宽度和高度（即使设置了也并不显示出来);
 *  此时div可以和别人并排;

同理

span {
       display: block;
       width: 300px;
       height: 300px;
       background-color: green;
    }

“block”是“块”的意思;

*  span标签变为块级元素，与div无异；
 *  span能够设置高度和宽度；
 *  span必须霸占一行，别人不能与之并排；
 *  如果不设置宽度，那么将撑满父亲。

#### 脱离标准文档流 ####

三种方法：  
**1）浮动**  
浮动的元素会脱离文档流；  
新建一个文档在页面上添加两个div给div分别加上class。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div class="one"></div>
        <div class="two"></div>
    </body>
    </html>

给div设置一个宽高及背景颜色 给one左浮动

然后用Chrome打开 结果会是这样

![ff9281e1989fa33f9b3bc89ce7179b11.png][]

可以看出给one左浮动后two消失不见了，这时审查元素看一下

![38b263afc5179c332ddd88daa3181458.png][]

会发现two跑到one下面去了，这是因为给one盒子左浮动了。浮动的元素不会占空间所以two占去了one的位置。

**2）绝对定位**：  
添加三个div分别加上class

![9ab3ea8ba98a07bec08b4021dd1b672e.png][]

给one设置绝对定位 并添加top：110px;left：150px;

![74b4c200f2673b40ddcd1ee7f7041049.png][]

可以看到one是可以飘在他们上面的

![cd071942980e26961f37502799d20baf.png][]

**3）固定定位**：  
把one改成固定定位

![b411b080973892ccac4cca94deb8f195.png][]

刷新浏览器

![fff680604f671727f4e738e7c1d4a5c4.png][]

发现他和absolute一样；唯一不同的就是他是固定在浏览器上的，fixed不会随着浏览器滚动条而滚动；

[ff9281e1989fa33f9b3bc89ce7179b11.png]: /images/20221119/e161c85968ee4884a5de871d26a9c6f2.png
[38b263afc5179c332ddd88daa3181458.png]: https://img-blog.csdnimg.cn/img_convert/38b263afc5179c332ddd88daa3181458.png
[9ab3ea8ba98a07bec08b4021dd1b672e.png]: https://img-blog.csdnimg.cn/img_convert/9ab3ea8ba98a07bec08b4021dd1b672e.png
[74b4c200f2673b40ddcd1ee7f7041049.png]: https://img-blog.csdnimg.cn/img_convert/74b4c200f2673b40ddcd1ee7f7041049.png
[cd071942980e26961f37502799d20baf.png]: https://img-blog.csdnimg.cn/img_convert/cd071942980e26961f37502799d20baf.png
[b411b080973892ccac4cca94deb8f195.png]: https://img-blog.csdnimg.cn/img_convert/b411b080973892ccac4cca94deb8f195.png
[fff680604f671727f4e738e7c1d4a5c4.png]: https://img-blog.csdnimg.cn/img_convert/fff680604f671727f4e738e7c1d4a5c4.png