網頁佈局方式定義：

• 網頁的佈局方式就是瀏覽器如何對網頁中的元素進行排版

主要分三種

• 標準流
• 浮動流
• 定位流

標準流（文件流/普通流）排版

• 定義：瀏覽器預設的排版方式
• 在css中元素分三類：行內元素、塊級元素以及行內塊級元素
• 標準流中分兩種排版方式
  
  • 垂直排版：元素是塊級元素
  • 水平排版：行內元素及行內塊級元素

浮動流排版float

• 作用：可以實現文字環繞效果
• 一種“半脫離標準流”的排版方式
• 只有一種水平排版方式，只能設定某個元素左對齊或右對齊
• 特點：
  
  • 浮動流中不區分行內元素/塊級元素/行內塊級元素，無論哪種元素都可以進行水平排版
  • 在浮動流中無論是行內元素/塊級元素/行內塊級元素都可以進行寬高設定
  • 綜上所述，浮動流中的元素和標準流中的行內塊級元素很像
• 注意點：
  
  • 浮動流中沒有居中對齊
  • 浮動流中不可以使用margin: 0 auto;的，這是無效的

浮動元素的脫標

• 定義：脫離標準流
  
  • 當某一個元素浮動之後，這個元素看上去像似被從標準流中刪除了一樣
• 浮動元素脫標之後的影響
  
  • 如果前面一個元素浮動了，而後面一個元素沒有浮動，那麼這時前面的一個元素就會覆蓋後面的一個元素

浮動元素排序規則

• 相同方向上的浮動元素，先浮動的元素會顯示在前面，後浮動的元素顯示在後面
• 不同方向上的浮動元素，左浮動會找左浮動，右浮動會找右浮動
• 浮動元素浮動之後的位置，由浮動元素浮動之前在標準流中的位置確定

浮動元素貼靠現象

• 當父元素的寬度足夠放下所有浮動元素時，它就會並列顯示，當寬度不足夠放下所有元素時，會從最後一個元素開始往前面的元素貼，直到貼到父元素的左邊位置，此時不管父元素的寬度夠不夠，都會顯示在父元素的位置。

浮動元素字圍效果

• 當前一個元素浮動了，後面一個元素沒有浮動，後面一個元素中的文字會緊貼前面一個元素顯示。
• 浮動元素不會蓋住沒有浮動元素中的文字，沒有浮動的元素會給浮動元素讓位置

重點：

• 在以後的企業開發中，一般在整體網頁垂直方向上採用標準流佈局，水平方向上採用浮動流佈局
• 面對一個很複雜的介面時，遵循從上到下，由外到內的佈局順序，水平方向上可以根據從左到右的順序

浮動元素高度的問題

• 在標準流中內容的高度可以撐起父元素的高度
• 在浮動流中浮動的元素不可以撐起父元素的高度

清楚浮動的方式

清楚浮動方式一

• 給前面一個父元素設定高度
• 注意：
  
  • 在企業開發中能不寫高度就不寫高度，所以這種方法用的很少

清楚浮動方式二

• 給後面的元素新增clear屬性
• clear屬性取值：
  
  • none:預設取值，按照浮動元素的排序規則（左浮動找左浮動，右浮動找右浮動）
  • left：不要找前面的左浮動元素
  • right：不要找前面的右浮動元素
  • both：不要找前面的左浮動和右浮動元素
• 注意點：
  
  • 當給某個元素新增clear屬性之後，那麼這個元素的margin屬性就會失效
  • 這裡margin為啥會失效？（留個疑問）

清楚浮動方式三

• 隔牆法
• 外牆法
  
  • 在兩個盒子中間新增一個額外的塊級元素
  • 給這個額外新增的元素新增clear:both;屬性
• 注意：
  
  • 可以讓第二個盒子使用margin-top屬性
  • 不可以讓第一個盒子使用margin-bottom屬性
  • 在企業開發中用外牆法直接給這個額外的元素新增高度就可以了，不用給第二個元素加margin-top屬性
• 內牆法
  
  • 在第一個盒子所有子元素最後新增一個額外的塊級元素
  • 給這個額外新增的塊級元素設定clear:both;屬性
• 注意點
  
  • 可以讓第二個盒子使用margin-top屬性
  • 可以讓第一個盒子使用margin-bottom屬性

外牆法和內牆法的區別：

• 外牆法可以讓第一個盒子設定margin-bottom屬性，內牆法不可以
• 外牆法不能撐起第一個盒子的高度，內牆法可以

在企業開發中不常用隔牆法來清楚浮動

偽元素選擇器

• 作用：給指定標籤的內容前面新增一個子元素或者給指定標籤的後面新增一個子元素
• 格式
  
  • 給指定標籤前面新增一個子元素

標籤名稱：：before{
    屬性名稱：值
}

• 給指定標籤後面新增一個子元素

標籤名稱：：after{
    屬性名稱：值
}

例如：

div::after {
    /*指定新增的子元素中儲存的內容*/
    content:"test";
    /*指定新增的子元素的寬度和高度*/
    width:50px;
    height:0px;
    /*指定新增的子元素的顯示模式*/
    display:block;
    /*隱藏新增的子元素*/
    visibility:didden;
}

清除浮動的方式四 （最推薦使用）

• 用偽元素選擇器和內牆法結合使用來給元素清除浮動
• 例如：

.box1::after{
    /*設定新增的子元素內容為空*/
    content:"";
    /*設定新增的子元素為塊級元素*/
    display:block;
    /*設定新增的子元素高度為0*/
    height:0px;
    /*設定新增的子元素內容隱藏*/
    visibility:hidden;
    /*給新增的子元素設定clear:both;屬性*/
    clear:both;
}
.box1 {
    /*用來相容IE6*/
    *zoom:1;
}

清除浮動方式五

• 通過overflow:hidden;來清除浮動
• overflow作用：
  
  • 將超出標籤範圍的內容拆剪掉
  • 清除浮動
  • 可以通過overflow:hidden;讓裡面的盒子設定margin-top之後，外面的盒子不被頂下來
• overflow:auto;作用
  
  • 如果包含圖片的元素的高度沒有圖片高，而且它是浮動的，可以使用overflow:auto;來清除浮動

定位流排版

• static,relative,absolute,fixed

預設定位

• 該關鍵字指定元素使用正常的佈局行為，即元素在文件流中當前的佈局位置。此時 top, right, bottom, left 和 z-index 屬性無效。

相對定位position:relative

• top,right,bottom,left
• 概念：相對於自己以前在標準流中的位置來移動
• 注意點：
  
  • 不脫離標準流，會繼續在標準流中佔用一份空間
  • 需要結合top/right/bottom/left屬性來使用，但是一個方向上的定位屬性只能使用一個
  • 由於相對定位是不脫離標準流的，所以相對定位是區分塊級元素，行內元素以及行內塊級元素的
  • 相對定位不脫離標準流，並且相對定位會佔用標準流中的位置，所以當給相對定位的元素設定margin/padding等屬性時會影響標準流的佈局
• 相對定位應用場景
  
  • 對元素進行微調
  • 配合後面學習的絕對定位使用
• 相對定位弊端
  
  • 相對定位不會脫離標準流，會繼續在標準流中保留一份空間，所以不利於佈局

絕對定位position:absolute

• 概念：相對於body來定位
• 注意點：
  
  • 脫離標準流
  • 絕對定位的元素不區分塊級元素，行內元素以及行內塊級元素
• 規律：
  
  • 預設情況下，所有的絕對定位元素無論有沒有祖先元素，都會以body作為參考
  • 如果一個絕對定位的元素有祖先元素，並且祖先元素也是定位流，那麼這個絕對定位的元素就會以定位流的那個祖先元素為參考點
  • 只要是這個絕對定位元素的祖先都可以
  • 指的定位流是指絕對定位/相對定位/固定定位
  • 定位流中只有靜態定位不行
  • 如果一個絕對定位的元素有祖先元素，並且祖先元素也是定位流，而且有多個祖先元素都是定位流，那麼這個絕對定位元素會以離它最近的元素作為參考點

絕對定位注意點

• 如果一個絕對定位是以body作為參考點，那麼其實是以網頁首屏的寬度和高度為作為參考點，而不是以整個網頁的高度和寬度為參考點
• 一個絕對定位的元素會忽略祖先元素的padding
• 絕對定位弊端
  
  • 預設情況下絕對定位的元素會以body作為參考點，所以會隨著瀏覽器的寬度高度的變化而變化

相對定位與絕對定位結合使用

• 子絕父相：子元素用絕對定位，父元素用相對定位

絕對定位的元素水平居中

• 只需設定絕對定位元素的left：50%,然後再設定margin-left:- 元素寬度的一半;

固定定位position:fixed

• top,right,bottom,left
• 概念：
  
  • 固定定位可以讓某個盒子不隨著滾動條的滾動而滾動。
• 注意點：
  
  • 固定定位的元素是脫離標準流的，不會佔用標準流中的空間
  • 固定定位和絕對定位一樣不區分行內/塊級/行內塊級

靜態定位

z-index屬性

• 概念：預設情況下所有的元素都有一個z-index屬性，取值為0；
• 作用：專門用於控制定位流元素的覆蓋關係
• 1、預設情況下定位流的元素會覆蓋標準流的元素
• 2、預設情況下定位流的元素後面編寫的會覆蓋前面編寫的
• 3、如果定位流的元素設定了z-index屬性，那麼誰的z-index屬性值大，誰就顯示在上面

注意點

• 從父現象
  
  • 如果兩個元素的父元素都沒有設定z-index屬性，那麼誰的z-index屬性比較大誰就顯示在上面
  • 如果兩個元素的父元素設定了z-index屬性，那麼子元素的z-index屬性就會失效，也就是說誰的父元素的z-index屬性比較大誰就會顯示在上面