CSS的三大特性

CSS有三個非常重要的三個特性:層疊性，繼承性、優先順序。

層疊性

相同選擇器設定相同的樣式，此時一個樣式就會覆蓋另一個衝突的樣式。層疊性主要解決樣式衝突的問題。

層疊性原則：

樣式衝突，遵循的原則是就近原則，哪個樣式離結構近，就執行哪個樣式。

樣式不衝突，不會層疊。

繼承性

現實中的繼承:我們繼承了父親的姓

CSS中的繼承子標籤會繼承父標籤的某些樣式,如文字顏色和字號。簡單的理解就是:子承父業。

恰當地使用繼承可以簡化程式碼,降低CSS樣式的複雜性

元素可以繼承父元素的樣式( text- , font- , line-這些元素開頭的可以繼承,以及color屬性)

優先順序

當同一個元素指定多個選擇器，就會有優先順序的產生。

選擇器相同，則執行層疊性。

選擇器不同，則根據選擇器權重執行。

盒子模型( Box Model )組成

所謂盒子模型:就是把HTML頁面中的佈局元素看作是一個矩形的盒子 ,也就是一個盛裝內容的容器。

CSS盒舒模型本質上是一個子,封裝周圍的HTML元愫,它包括:邊框、外邊距、內邊距、和實際內容。

邊框( border )

border可以設定元素的邊框。邊框有3部分組成:邊框寬度(粗細)邊框樣式邊框顏色語法:

border : border-width 11 border-style | | border -color

屬性

作用

border-width

定義邊框粗細，單位是px

border-style

邊框的樣式

border-color

邊框顏色

表格的細線邊框

border-collapse 屬性控制瀏覽器繪製表格邊框的方式。它控制相鄰單元格的邊框。
語法：
border-collapse:collapse;
collapse 單詞是合併的意思
border-collapse: collapse;
(表示相鄰邊框合併在一起）

邊框會影響盒子實際大小

邊框會額外增加盒子的實際大小。因此我們有兩種方案解決：
1.測量盒子大小的時候不量邊框
2.如果測量的時候包含了邊框,則需要 width/height 減去邊框寬度

外邊距合併

使用margin定義塊元素的垂直外邊距是，可能會出現外邊距的合併。
相鄰塊元素垂直外邊距的合併
當上下相鄰的兩個塊元素(兄弟關係)相遇時，如果上面的元素有下邊距margin-bottom，下面的元素有上外邊距margin-too，則他們之間的垂直間距不是margin-bottom與margintoo之和取兩個值中的極大者這種現象被稱為相鄰塊元素垂直外邊距的合併。
解決方案：儘量只給一個盒子新增margin值。

巢狀塊元素垂直外邊距的坍塌。

對於兩個巢狀關係(父子關係)的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。

解決方案：可以為父元素定義上邊框。

可以為父元素定義上內邊距。

可以為父元素新增overflow:hidden。