塊級元素和行內元素
常見塊級元素 div/p/form/ul/ol/li...
常見的行內元素 span/strong/em...
區別：
- 塊級元素獨自佔一行且寬度會佔滿父元素寬度，行內元素不會獨佔一行，相鄰行內元素可以排在同一行
- 塊級元素可以設置width和height，行內元素設置width和height無效，而且塊級元素即使設置寬度也還是獨佔一行
- 塊級元素可以設置margin和padding屬性，行內元素水平方向的margin和padding可以產生邊距效果，但是豎直方向的如padding-top和margin-bottom不會產生邊距效果（意思爲margin不起作用，padding起顯示作用但無實際邊距，與周圍會產生重疊）
行內元素進階
行內元素又分爲可替換元素和不可以替換元素 -
替換元素：替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。HTML中的img、input、textarea、select、object都是替換元素。這些元素往往沒有實際的內容，即是一個空元素。可以設置width、height
不可替換元素：(X)HTML 的大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器）, 如。設置width、height無效
不可替換元素需要設置width、height的幾種方法 -
- 浮動 - float：隱式使用inline-block, 不論元素本身是什麼，當它浮動時，就會生成一個塊級框
- position:absolute: 隱式使用inline-block, 與float的區別是不影響兄弟元素，不佔位
- inline-block
Position
相關的值
- static：默認值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被“positioned”。
- relative：
relative表現的和static一樣，除非添加了一些額外的屬性。 - fixed：一個固定定位（position屬性的值爲fixed）元素會相對於視窗來定位，這意味着即便頁面滾動，它還是會停留在相同的位置。有兼容問題
- absolute：
absolute與fixed的表現類似，但是它不是相對於視窗而是相對於最近的“positioned”祖先元素（即非static元素。）
清除浮動
why: 當float子元素高度超出父級元素高度時，父級元素高度塌縮，因爲float元素脫離文檔流，其佈局不受父元素控制
如何解決
- 添加帶clear:both的div
- 父元素設置overflow:hidden or auto
- 父元素添加:after僞元素並設置{ content: ".";display: block;height: 0;visibility: hidden;clear: both; }
僞類與僞元素
僞類：僞類用於選擇DOM樹之外的信息，或是不能用簡單選擇器進行表示的信息。（按功能分爲狀態僞類和結構性僞類）
僞元素：僞元素爲DOM樹沒有定義的虛擬元素。
自己理解: 僞類用於用於向某些選擇器添加特殊的效果，僞元素用於將特殊的效果添加到某些選擇器
自己理解（白話）：僞類其實是彌補了CSS選擇器的不足，用來更方便地獲取信息。 而僞元素本質上是創建了一個虛擬容器(元素)，我們可以在其中添加內容或樣式。
常用僞類： :visited/:hover/:active/:first-child/:nth-child....
常用僞元素：::before/::after/::first-letter/::last-letter.... (僞元素建議使用標準的雙冒號)
CSS的層疊&繼承
繼承：某些類型的屬性是不會默認繼承的，而某些元素則不會繼承某些屬性。但是在某些情況下，可以使用 [property name]: inherit 來強制繼承。
舉個例子，input 元素不會繼承任何字體的屬性，textarea 也一樣不會繼承。爲了確保所有元素都可以從全局作用域中繼承這些屬性，可以使用通配選擇符和 inherit 關鍵字。這樣，就可以最大程度地使用繼承了。
* {
font-family: inherit;
line-height: inherit;
color: inherit;
}
盒模型相關
max-width/min-width：設置大小約束而不是絕對的大小 , 多語言切換場景比較實用
常規寬度
真實width = 塊元素width + 2 * border-width + 2 * padding-width
box-sizing模式
真實width = 設置的塊元素width
外邊距塌陷（margin-collapse）
原因：
流內塊級元素的top與bottom外邊距有時會合並（塌陷）爲單個外邊距（合併後最大的外邊距）
具體計算結果：
- 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。
- 兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。
- 兩個外邊距一正一負時，摺疊結果是兩者的相加的和
解決辦法：
原因
- 一個浮動的盒與任何其它盒之間的margin不會合並（甚至一個浮動盒與它的流內子級之間也不會）
- 建立了新的塊格式化上下文的元素（例如，浮動盒與'overflow'不爲'visible'的元素）的margin不會與它們的流內子級合併
- 絕對定位的盒的margin不會合並（甚至與它們的流內子級也不會）
- 內聯盒的margin不會合並（甚至與它們的流內子級也不會）
因此
- border:1px solid transparent;
- padding;
- float:left/right
- position:absolute
- display:inline-block
- overflow:hidden/auto
溢流Overflow
原因：當一個元素固定爲某個特定大小，但內容在元素中放不下。此時就可以利用overflow屬性來控制這種情況
相關的值：
- visible：元素的內容在元素框之外也可見
- hidden：超出的內容不可見
- scroll：固定出現雙向滾動條
- auto：如果內容超出會顯示單向滾動條
- inherit：繼承
BFC
BFC是block formatting context，也就是塊級格式化上下文
觸發條件：
- 根元素，即HTML元素
- float的值不爲none
- overflow的值不爲visible
- display的值爲inline-block、table-cell、table-caption
- position的值爲absolute或fixed
作用
- 可以阻止元素被浮動元素覆蓋 => 橫向菜單Menu
- 可以包含浮動元素 => 清除浮動
- 阻止外邊距塌陷（margin-collapse）=>