1 浮動

1.1 浮動的簡介

1. 浮動最初實現文字環繞效果
2. 現在浮動是主流的頁面佈局方式之一

1.2 元素浮動之後的特點

1. 元素浮動之後會脫離文件流，浮動的元素如果與文件流中的元素位置發生重疊，浮動元素顯示到上面。
2. 多個兄弟元素全部設定浮動，會水平排列；父元素寬度不夠，自動換行。
3. 不論元素原來的顯示模式是塊級、行內、行內塊，設定浮動之後就是浮動元素，獨立於原來的顯示模式，擁有自己的顯示特點
4. 浮動元素的顯示特點：
   ① 浮動元素預設的寬高被內容撐開
   ② 浮動元素可以完美地設定寬高、內外邊距
   ③ 沒有外邊距的塌陷和合並問題（區別於塊級元素）
   ④ 不會被父元素作為文字區處理（區別於行內塊元素、行內元素）
 

1.3 浮動元素產生的影響

① 對後面兄弟元素的影響

影響：

浮動元素後面的兄弟元素會佔據浮動元素原來的位置，會顯示在浮動元素的下層。

解決：

給緊鄰浮動元素後面的那一個兄弟塊元素設定 clear:left/right/both

② 對父元素的影響

影響：

如果父元素沒有設定固定高度，子元素設定浮動之後，父元素高度會塌陷（父元素高度不能被浮動的子元素撐起來）

解決：

- 方案一 ： 給父元素設定固定高度（不推薦）
- 方案二 ： 給父元素設定浮動（以浮制浮）（不推薦，會產生新的問題）
- 方案三 ： 給父元素設定 overflow，值不為 visible 即可（推薦）
- 方案四 ： 在浮動元素的後面新增一個兄弟塊級元素，設定 clear:both; 該元素不要有高度和內容。
- 方案五 ： 實現原理同方案四，利用偽元素選擇器動態地為父元素建立最後一個子元素（在所有浮動元素的後面），設定成塊級元素，設定為 clear:both（方案五）
        .wrapper::after {
            content: "";
            display: block;
            clear: both;
        }
        ---
        .wrapper:after {
            content: "";
            display: block;
            clear: both;
        }        
 

1.4 浮動相關的 CSS 屬性

2 行內元素或行內塊元素在佈局中的特點

2.1 父元素設定的文字屬性作用於行內元素和行內塊元素

① 讓行內塊元素或行內元素水平居中（在父元素中設定樣式）

text-align: center;

② 讓行內元素或行內塊元素垂直居中（在父元素中設定行高）

1. 父元素中設定行高與父元素高度一致
2. 行內塊本身還需要設定 vertical-align: middle;
 

注意點：
1、行內塊元素，預設情況下底線與文字的基線對齊，所以行內塊元素垂直居中還需要設定 vertical-align:middle，讓行內元素與文字的中線對齊
2、當行內塊元素內有文字時，為了不讓父元素設定的行高影響行內塊元素內的文字，需要重新設定行高，保證文字的正常顯示

2.2 行內元素或行內塊元素之間的空白問題

① 元素之間的空白（左右）

產生原因：

寫程式碼的時候，保證程式碼可讀性，每個html標籤後面有換行，換行會被識別為空格。

解決方案：

方案一： 每個標籤後面不換行
方案二： 父元素設定字型大小為 0，再單獨給行內塊元素設定字型大小

② 底部的空白（圖片的幽靈空白）

產生原因：

預設行內塊元素的底部與文字的基線對齊，底部的空白就是文字基線與文字底線的距離

解放方案：

方案一： 給父元素設定字型大小為 0
方案二： 給行內塊元素本身設定 vertical-align，值只要不是 baseline 都可以
方案三： 修改顯示模式為塊級（主要針對於圖片）

③ 文字內容個數不同的行內塊元素水平排列無法對齊

產生原因：

⭐️⭐️⭐️行內塊元素的基線對齊具體說明

行內塊元素基線對齊：
    1. 有多行文字的行內元素最後一行文字與基線對齊
    2. 單行文字的行內元素就是該行文字與基線對齊
    3. 沒有文字元素的行內元素底部與基線對齊

解決方案：

給行內塊元素本身設定 vertical-align，值只要不是 baseline 都可以

3 頁面佈局

3.1 頁面的組成部分

3.2 重置樣式表

reset.css
normalize.css

3.3 版心 container

1. 寬度固定
2. 水平居中

3.4 編碼規範

1. 短橫線分隔符
2. 可以使用這個順序寫css

Positioning 定位相關屬性
Box model 盒子模型相關屬性
Typography 文字字型相關屬性
Visual 視覺效果相關屬性（背景等）