Web前端開發——CSS層疊樣式表（3）

　　CSS三大特性

　　層疊性

　　相同選擇器給設定相同的樣式，此時一個樣式就會覆蓋(層疊)另一個衝突的樣式。

　　採用就近原則，哪個樣式離結構進就執行哪個樣式。

　　樣式不衝突，不會層疊。

　　繼承性

　　子標籤會繼承父標籤的某些樣式

　　子元素可以繼承父元素的樣式

　　行高的繼承性

　　body {

　　font-size:12px/1.5

　　}

　　優先順序

　　1.繼承或者*

　　2.元素選擇器

　　3.類選擇器或者偽類選擇器

　　4.ID選擇器

　　5.行內樣式< /style>

　　6.!important

　　從小到大 越來越大

　　繼承的權重性為0

　　CSS盒子模型

　　組成

　　盒子模型有內容，邊框(border)，內邊距(padding)，外邊距(margin)組成。

　　盒子裡面的文字和圖片等元素是內容區域

　　盒子的厚度為邊框

　　盒子邊框(border)

　　border-width 邊框寬度 px

　　border-color 邊框顏色

　　border-style ： 邊框風格 soild 實線 dotted 點線 dashed 虛線

　　簡寫屬性：

　　font:font-width font-style font-style

　　font:1px solid pink

　　分別指定邊框

　　border-top：

　　border-right：

　　border-bottom:

　　border-left:

　　邊框會影響盒子的實際大小

　　padding內邊距

　　邊框與內容的距離

　　padding-left

　　padding-right

　　padding-top

　　padding-bottom

　　簡寫屬性

　　padding :10px 代表上下左右各邊距為10畫素

　　padding : 10px 10px 代表上下，左右邊距為10畫素

　　padding : 10px 10px 10px 代表 上，左右，下邊距為10畫素

　　padding : 10px 10px 10px 10px 代表上，右，下，左，邊距為10畫素

　　1234

　　盒子的實際大小=內容寬度高度+內邊距+外邊距

　　如果沒有給一個盒子指定寬度，則不會撐開盒子。

　　外邊距

　　盒子與盒子之間的距離

　　margin-leftmargin-rightmargin-topmargin-bottom``

　　簡寫屬性

　　margin:10px 代表上下左右各邊距為10畫素

　　margin: 10px 10px 代表上下，左右邊距為10畫素

　　margin: 10px 10px 10px 代表 上，左右，下邊距為10畫素

　　margin: 10px 10px 10px 10px 代表上，右，下，左，邊距為10畫素

　　1234

　　塊級盒子水平居中 　

　　具備的條件

　　1.必須有高度

　　2.左右外邊距為auto

　　具體寫法

　　1.margin:auto;

　　2.margin:0 auto;

　　3.margin-left:auto;

　　margin-right:auto;

　　文字居中和盒子居中區別

　　text-align:center;文字居中

　　margin:auto; 盒子居中

　　可以讓盒子裡面的文字，行內元素，行內塊居中。

　　清除元素預設的內外邊距

　　*{ margin:0;padding:0 }

　　行內元素為照顧相容性，儘量設定左右內外邊距，不要設定上下內外邊距，不然不顯示效果。