Day9 學習筆記
3月11號的筆記拖到現在才整理，是因為真的很難。別看影片目錄感覺內容少，其實講了很多很多，光消化筆記就用了很長時間，特別是對於浮動的理解。
照例先放目錄，下面是學習筆記。分為兩個部分：一個是根據影片錄播做的截圖筆記（已製作為PDF檔案），另一部分是重點筆記（內容更精簡）。下面全部分享出來，一方面督促自己學習，另一方面歡迎大家交流分享~
今日學習內容
截圖筆記2021_03_11。pdf重點筆記20210311。pdf
學習內容包括三部分：標準文件流、浮動和偽類。個人認為浮動最難理解，需要對照程式碼操作、想象抽象的內容。
標準文件流
標準文件流的概念：實質上是指元素排版佈局的方式，是自動從左到右，從上往下排列，如果前面的內容發生變化，後面的內容位置也會發生變化。HTML就是一種標準文件流檔案。
標準文件流的特點：微觀現象、元素等級。這裡比較重要的是
元素等級
。元素等級把元素劃分為
塊級元素/行內元素/行內塊元素
。比如
就是典型的塊級元素
（
之前父子盒模型那裡提到的“類似div這樣的標籤，沒設定寬度，就會預設撐滿父級的width”，這指的就是塊級元素的載入特點
）；而
，其中行內元素也叫做內聯元素；
圖片是行內塊元素
。這裡很重要的一點就是，
行內元素和塊級元素對於寬高的載入機制
，如下所示：
寬度
高度
行內元素（不能正常載入寬高）
不論是否設定寬高，寬度和高度都只能被內容自動撐開
不論是否設定寬高，寬度和高度都只能被內容自動撐開
塊級元素（可以設定寬高，會正常載入）
如果不設定寬度，會自動撐滿父級的width區域
如果不設定高度，會被內容自動撐開高度
CSS常用樣式
顯示模式display：在行內元素和塊級元素之間互相切換，主要用來設定導航欄（透過display：“inline”）；還有一點
比較特殊的是隱藏
，這裡的佔位/讓位是指是否讓出原有標準流的位置，也就是說是否存在間隙。
display：“none”
讓位隱藏
visibility：“hidden”
佔位隱藏
2。
浮動屬性
前面提到的display屬性更改並沒有改變標準流本質。要想實現更多的頁面佈局效果，就需要脫離標準流，方法包括：浮動、絕對定位、固定定位。
這裡要講的就是浮動。浮動非常重要，不要簡單地把它理解為僅僅可以實現display：“inline”後變成導航欄這樣的效果，它還有更加深層次的特點，這在浮動的性質中體現得非常明顯。
要想更容易地理解浮動的性質，就
必須發揮想象力
。首先，你可以想象瀏覽器載入視窗相當於一個水面，元素浮動其實就相當於底層的元素往上浮到了水面上。這樣一來，就很容易理解浮動性質中的元素貼邊了。
float：“left”左浮動
float：“right”右浮動
作用：讓元素脫離標準流，同一級的浮動元素可以並排在一排顯示。
3。 浮動的性質（這一塊內容比較多，重在理解，需要配合敲程式碼練習進行理解）
1、浮動的元素脫離標準流；
2、浮動的元素依次貼邊，這裡
有兩個關於貼邊性質應用的案例可以進行練習
；
3、浮動的元素沒有margin塌陷
4、浮動的元素讓出標準流位置
5、字圍現象
4。 浮動的問題
問題一：標準流中的元素，不設定高度的情況下，都能被內部的標準流元素自動撐高（如圖1）。但是如果內部的子元素進行了浮動，浮動的子元素是撐不高標準流父親的（如圖2）。
圖1：父盒子不設定高度時，它被子盒子自動撐高
圖2：子盒子浮動後，標準流的父盒子邊框被摺疊
問題二：父元素沒有高度。會影響後面的標準流位置。如果浮動的子元素足夠高時，有可能影響到後面浮動元素的貼邊。
5。 清除浮動帶來的影響
情況一：如果父元素的高度時固定的，給父元素設定height屬性解決；
情況二：如果父元素高度需要自適應（即當子盒子內容變化時，也要始終在父盒子內部載入不能溢位），給父盒子不要設定高度，給它設定overflow：“hidden”屬性解決。
這裡要結合程式碼練習，著重理解高度自適應的原理。
除此之外，課程中還講解了其他幾種清除浮動帶來的影響的方法，其實都不常用，但要理解它們背後的原理，比如clear屬性、隔牆法（外牆法、內牆法）、。clearfix：after{}偽類。
偽類
偽類：偽類和類的區別；偽類的寫法；偽類的權重
link
訪問前
visited
訪問後
hover
滑鼠懸浮
active
滑鼠點選後到彈起前
因為偽類的權重是相同的，因此在發生層疊時，只能根據書寫順序來判斷。正常載入的書寫順序是：link-visited-hover-avtive
實際應用中，通常將link和visited透過並集選擇器設定相同的顏色，將hover設定成不同的顏色加以區分，很少設定active。也可以透過下圖的寫法，將標籤的link和visited的顏色設定、text-decoration：none去掉下劃線、字型等直接合併到一起書寫，然後再單獨對hover狀態進行設定。
以上是關於3月11號筆記的總結，還需要多多練習本次提到的兩個關於貼邊性質應用的案例，並且多敲程式碼才能熟悉整個原理。
