前端基礎-CSS如何佈局以及文檔流，對於新手來說，特別有用

一、網頁佈局方式

1、什麼是網頁佈局方式佈局可以理解爲排版，我們所熟知的文本編輯類工具都有自己的排版方式

比如word，nodpad++等等而網頁的佈局方式指的就是瀏覽器這款工具是如何對網頁中的元素進行排版的

2、網頁佈局/排版的三種方式

1、標準流

2、浮動流

3、定位流

二、標準流’

標準流的排版方式，又稱爲：文檔流/普通流，所謂的文檔流，指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。

瀏覽器默認的排版方式就是標準流排版方式
在CSS中將元素分爲三類：分別是塊級行內行內塊級
在標準流中有兩種排版方式，一種是垂直排版，一種是水平排版垂直排版，如果元素是塊級元素，那麼就會垂直排版水平排版，

如果元素是行內元素或行內塊級元素，那麼就會水平排版

<!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;

<!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，是以該標籤原來的位置爲基礎來進行偏移的

<!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或者某個定位流中的祖先元素來定位

<!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大誰蓋住誰
以上就是我的分享，希望對你有所幫助，另外我自己也從事前端開發多年，
自己對於前端也做了一些學習的總結，也錄製了基礎的精講視頻和學習方法，
如果你這邊需要的話，可以點此鏈接：前端學習視頻和學習路線分享另外如果對於學習前端還有什麼問題（學習方法，學習效率，如何就業）可以私信我，隨時爲你解答

<!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="box1"></div>-->
<!--<div class="box2"></div>-->
<!--<div class="box3"></div>-->


<div class="father1">
    <div class="son1"></div>
</div>


<div class="father2">
    <div class="son2"></div>
</div>
</body>
</html>

前端基礎-CSS如何佈局以及文檔流，對於新手來說，特別有用

關於遊戲付費的一點想法

我通過CKA和CKS啦！

8年前端開發的知識點沉澱(不知道會多少字，一直寫下去吧，)

web前端好入門嗎？

整理了 25 個前端相關的學習網站和一些靠譜的小工具，都來看看吧

你必須學會HTML和CSS的9大理由，讓你在以後的工作中更香

前端基礎-CSS如何佈局以及文檔流，對於新手來說，特別有用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結