前端學習第五天

今天是學習前端的第五天，主要學習內容為css的三大特性與盒子模型的相關內容。
css的三大特性為：層疊性、繼承性和優先順序。
層疊性：在開發中對同一個元素多次設定同一個樣式，此時一個樣式就是覆蓋（層疊）另外一個衝突的樣式，最終使用最後一次設定的屬性值。css的層疊性遵循如下原則：1.樣式衝突時，哪個樣式離結構近就遵循哪個樣式（就近原則）；2.樣式不衝突時，無論定義先後，始終有效（不衝突不層疊）。
繼承性：子元素會繼承父元素的某些樣式，如文字顏色、字型屬性等。利用這一特性，我們可以在開發中簡化程式碼，例如在body中指定行高為1.2倍，那麼子元素可以根據自己的文字大小自動調整行高，不需一個元素一個元素去設定。
優先順序：當同一個元素被指定了多個選擇器時，需要根據優先順序來判斷元素到底執行哪個選擇器的樣式。選擇器的權重級別如下：其中需要注意的問題是：1.權重由4組數字組成，在複合選擇器中，權重會出現疊加的情況，但是不會出現進位的情況；2.等級判斷從左向右，當某一位數值相同時，比較下一位數值的大小；3.加了！important的屬性，不論其之前的選擇器優先順序是多少，都不會被層疊掉；4.繼承的權重為0，無論父元素的權重多高，子元素繼承的權重都為0。
網頁佈局的三大核心為：盒子模型、浮動和定位，其過程大致可以分為三步：1.準備好相關的網頁元素（盒子）；2.利用css設定盒子的樣式，並擺放到相應的位置；3.往盒子裡裝內容。因此，我們可以說網頁佈局的本質就是利用css擺盒子。
css盒子模型包含四個部分：實際內容（content）、內邊距（padding）、邊框（border）以及外邊距（margin），其結構如下：

實際內容就是盒子裡裝的東西。
邊框：邊框由三部分組成，分別是邊框寬度（border-width）、邊框樣式（border-style）和邊框顏色（border-color）。其複合寫法沒有規定順序，但一般記為：border：width style color；。也可通過top/bottom/left/right來單獨指定，一般記為：border-top：width style color；。需要注意的是邊框也會影響到盒子的實際大小，因此我們也需要將width/height減去邊框的寬度。
內邊距：內邊距是實際內容與盒子邊框的距離，我們可以通過padding來設定，記為：padding-left：10px表示內容與左邊框的距離為10畫素，right/top/bottom用法相同，其複合寫法如下：
需要注意的是如果盒子已經指定了寬度和高度，那麼padding會影響到盒子的實際大小（撐大盒子）；如果盒子沒有指定寬度或高度，則不會影響。為了保證盒子的實際大小不變，我們需要讓width/height減去多出來的內邊距大小。
外邊距：外邊距是盒子與盒子之間的距離，我們可以用margin來設定它。margin的單獨及複合寫法與padding相同。我們可以使用把水平間距設定為auto來讓一個有寬度的盒子實現水平居中，記為：margin：0 auto，其中0為盒子的垂直外邊距，可根據需要設定。
另外，需要注意的有兩點：1.相鄰元素垂直外邊距合併：當上下相鄰的兩個塊元素（兄弟關係）相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合併。
其解決方案為只給一個盒子新增margin值（二者之和）。
2.巢狀塊元素垂直外邊距的塌陷：對於兩個巢狀關係（父子關係）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。

其解決方案（今天所學）為：1.為父元素定義上邊框；2.為父元素定義上內邊框；3.為父元素新增overflow：hidden。
由於網頁元素很多都帶有預設的內外邊距，而且瀏覽器的預設值也不盡相同，為了避免其對網頁佈局的影響，我們需要清除網頁元素的內外邊距，記為：* {margin：0；padding：0；}，寫在css中的第一行。