前端基础-CSS如何布局以及文档流，对于新手来说，特别有用

Bertha 。 2023-02-09 14:14 7阅读 0赞

一、 网页布局方式

1、什么是网页布局方式 布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式

比如word，nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
2、网页布局/排版的三种方式

1、标准流

2、浮动流

3、定位流

二、标准流’

标准流的排版方式，又称为：文档流/普通流，所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

1.  浏览器默认的排版方式就是标准流排版方式
2.  在CSS中将元素分为三类：分别是 块级 行内 行内块级
3.  在标准流中有两种排版方式，一种是垂直排版，一种是水平排版 垂直排版，如果元素是块级元素，那么就会垂直排版 水平排版，

如果元素是行内元素或行内块级元素，那么就会水平排版

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <style type="text/css">
            div,h1,p {
                border: 1px solid red;
            }
    
            span，strong,b {
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
    <div>我是div</div>
    <h1>我是标题</h1>
    <p>我是段落</p>
    
    <span>span</span>
    <strong>我是强调</strong>
    <b>我是加粗</b>
    </body>
    </html>

三、浮动流

1、浮动流是一种半脱离标准流的排版方式那什么是脱离文档流？什么又是半脱离文档流？

1.1 什么是脱离文档流？

1、浮动元素脱离文档流意味着

1.不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版

2.无论是什么级的元素都可以设置宽高 综上所述，浮动流中的元素和标准流中的行内块级元素很像

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /*
            不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版：span和p都显示到一行
            无论是什么级的元素都可以设置宽高：span这种行内元素也可以设置宽高
            */
            .box1 {
                width: 100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            .box2 {
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            }
        </style>
    </head>
    <body>
    <span class="box1">我是span</span>
    <p class="box2">我是段落</p>
    </body>
    </html>

2、浮动元素脱标文档流意味着

1.当某一个元素浮动走之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标

2.如果前面一个元素浮动走了，而后面一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后就会覆盖该元素

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动元素脱标</title>
        <style>
            .box1 {
                float: left;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .box2 {
                width: 150px;
                height: 150px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    </body>
    </html>

注意点：

1、浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值

2、一旦使用了浮动流，则margin:0 auto;失效

1.2、 那什么又是半脱离文档流？

脱离分为：半脱离与完全脱离， 其中完全脱离指的是元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样

而之所以称为半脱离：是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，

比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，

打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，

他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：

（1）同一个方向上谁先浮动，谁在前面

（2）不同方向上左浮动找左浮动，右浮动找右浮动

浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动元素排序规则</title>
        <style>
            .box1 {
                float: left;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .box2 {
                width: 150px;
                height: 150px;
                background-color: blue;
            }
            .box3 {
                float: left;
    
                width: 250px;
                height: 250px;
                background-color: yellow;
            }
            .box4 {
                width: 300px;
                height: 300px;
                background-color: rebeccapurple;
            }
        </style>
    </head>
    <body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>

同一个方向上谁先浮动，谁在前面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动元素排序规则</title>
        <style>
            .box1 {
                float: left;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .box2 {
                float: left;
                width: 150px;
                height: 150px;
                background-color: blue;
            }
            .box3 {
                float: left;
                width: 250px;
                height: 250px;
                background-color: yellow;
            }
            .box4 {
                float: left;
                width: 300px;
                height: 300px;
                background-color: rebeccapurple;
            }
        </style>
    </head>
    <body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    </body>
    </html>

不同方向上左浮动找左浮动，右浮动找右浮动

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动元素排序规则</title>
        <style>
            .box1 {
                float: left;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .box2 {
                float: left;
    
                width: 150px;
                height: 150px;
                background-color: blue;
            }
            .box3 {
                float: right;
    
                width: 250px;
                height: 250px;
                background-color: yellow;
            }
            .box4 {
                float: right;
    
                width: 300px;
                height: 300px;
                background-color: rebeccapurple;
            }
        </style>
    </head>
    <body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    </body>
    </html>

1.3、 浮动元素贴靠问题

当父元素的宽度足够显示所有元素时，浮动的元素就会并列显示 当父元素的宽度不足够显示所有元素时，

浮动的元素就贴前一个元素，如果还不够，就会再贴前一个元素 直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动元素贴靠问题</title>
        <style>
            .father {
                width: 400px;
                height: 400px;
                border: 1px solid #000;
            }
            .box1 {
                float: left;
                width: 50px;
                height: 300px;
                background-color: rebeccapurple;
            }
            .box2 {
                float: left;
                width: 50px;
                height: 100px;
                background-color: green;
            }
            .box3 {
                float: left;
                width: 250px;
                /*width: 300px;*/
                /*width: 310px;*/
                /*width: 400px;*/
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
    <div class="father">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
    </body>
    </html>

四、定位流

1、相对定位就是相对于自己以前在标准流中的位置来移动

格式：
    　　position：relative
    
    需要配合以下四个属性一起使用
            top:20px;
            left:30px;
            right:40px;
            bottom:50px;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin:0;
                padding:0;
            }
            div {
                width: 100px;
                height: 100px;
            }
            .box1 {
                background-color: red;
            }
            .box2 {
                background-color: green;
                position: relative;
                top: 20px;
                left: 20px;
            }
            .box3 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    </body>
    </html>

1.1、 相对定位的注意点

1 在相对定位中同一个方向上的定位属性只能使用一个 　　top/bottom 只能用一个 　　left/right 只能用一个

2 相对定位是不脱离标准流的，会继续在标准流中占用一份空间

3 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级、行内、行内块级元素的

4 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding 等属性时会影响到标准流的布局，

即，给相对定位的标签设置marin或padding，是以该标签原来的位置为基础来进行偏移的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin:0;
                padding:0;
            }
            div {
                width: 100px;
                height: 100px;
            }
            .box1 {
                background-color: red;
            }
            .box2 {
                background-color: green;
                position: relative;
                top: 20px;
                left: 20px;
                /*相对于该标签原来的位置进行偏移*/
                margin-top: 50px;
            }
            .box3 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    </body>
    </html>

1.2 相对对位的应用场景

1.用于对元素进行微调

2.配合后面学习的绝对定位来使用

绝对定位就是相对于body或者某个定位流中的祖先元素来定位  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 100px;
            }
    
            .box1 {
                background-color: red;
            }
            .box2 {
                position: absolute;
                /*left: 0;*/
                /*top: 10px;*/
                background-color: green;
    
            }
            .box3 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    
    </body>
    </html>

2、固定定位

1、固定定位（和绝对定位高度相似，和背景的关联方式也高度相似） 背景的关联方式background-attachment: fixed;

可以让图片不随着滚动条的滚动而滚动 而固定定位可以让某一个元素不随着滚动条的滚动而滚动

2、注意点

1.固定定位的元素是脱离标准流的，不会占用标准流中的空间

2.固定定位和绝对定位一样不区分行内、块级、行内块级 3、E6不支持固定定位

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .bg {
                width: 600px;
                height: 1000px;
                border: 1px solid #000;
                background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224016405-1306758469.jpg");
                background-repeat: no-repeat;
                background-attachment: fixed;
            }
            div {
                width: 100px;
                height: 100px;
            }
            .box1 {
                background-color: red;
            }
            .box2 {
                border: 1px solid #000;
                border-radius: 50%;
                text-align: center;
                line-height: 100px;
    
                background-color: green;
                position: fixed;
                right: 0;
                bottom: 0;
            }
            .box3 {
                background-color: blue;
            }
            .box4 {
                background-color: yellow;
                height: 2000px;
            }
        </style>
    </head>
    <body>
    <div class="bg"></div>
    <div class="box1"></div>
    <div class="box2">回到顶部</div>
    <div class="box3"></div>
    <div class="box4"></div>
    </body>
    </html>

3、静态定位

1.什么是静态定位?

默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流 静态定位应用场景:

2.一般用于配合JS清除定位属性z-index属性

3.z-index属性：用于指定定位的元素的覆盖关系 定位元素的覆盖关系:

默认情况下定位的元素一定会盖住没有定位的元素

默认情况下写在后面的定位元素会盖住前面的定位元素

默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面

4.注意点：从父现象 父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁 父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁  
以上就是我的分享，希望对你有所帮助，另外我自己也从事前端开发多年，  
自己对于前端也做了一些学习的总结，也录制了基础的精讲视频和学习方法，  
如果你这边需要的话，可以点此链接：[前端学习视频和学习路线 分享][Link 1] 另外如果对于学习前端还有什么问题（学习方法，学习效率，如何就业）可以私信我，随时为你解答

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            /*div  {*/
                /*width: 100px;*/
                /*height: 100px;*/
            /*}*/
    
            /*.box1 {*/
                /*background-color: red;*/
                /*position: relative;*/
                /*top: 0px;*/
                /*left: 0px;*/
    
                /*!*z-index: 3;*!*/
            /*}*/
    
            /*.box2 {*/
                /*background-color: green;*/
                /*position: absolute;*/
                /*top: 50px;*/
                /*left: 50px;*/
    
                /*!*z-index: 2;*!*/
            /*}*/
    
            /*.box3 {*/
                /*background-color: blue;*/
                /*position: fixed;*/
                /*left: 100px;*/
                /*top: 100px;*/
    
                /*!*z-index: 1;*!*/
            /*}*/
    
    
    
            .father1 {
                width: 200px;
                height: 200px;
                background-color: red;
    
    
                position: relative;
                z-index: 5;
            }
    
            .father2 {
                width: 200px;
                height: 200px;
                background-color: green;
    
                position: relative;
                z-index: 4;
            }
    
            .son1 {
                width: 100px;
                height: 100px;
                background-color: blue;
                position: absolute;
                left: 200px;
                top: 200px;
    
                z-index: 1;
    
    
            }
            .son2 {
                width: 100px;
                height: 100px;
                background-color: yellow;
                position: absolute;
                left: 250px;
                /*top: 250px;*/
    
                z-index: 2;
                top: 50px;
    
            }
    
        </style>
    </head>
    <body>
    
    
    
    
    
    
    
    <div class="father1">
        <div class="son1"></div>
    </div>
    
    
    <div class="father2">
        <div class="son2"></div>
    </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200519113419690.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200519113708481.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200519113743599.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200519113808140.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200519113816333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[Link 1]: https://docs.qq.com/doc/DUHZRdk9EUUZxcWZw