CSS 三大特性

css，層疊樣式表

CSS層疊性

所謂層疊性是指多種CSS樣式的疊加。

是瀏覽器處理沖突的一個(gè)能力,如果一個(gè)屬性通過(guò)兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上，那么這個(gè)時(shí)候一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉

比如先給某個(gè)標(biāo)簽指定了內(nèi)部文字顏色為紅色，接著又指定了顏色為藍(lán)色，此時(shí)出現(xiàn)一個(gè)標(biāo)簽指定了相同樣式不同值的情況，這就是樣式?jīng)_突。

1.樣式?jīng)_突，遵循的原則時(shí)就近原則

2.樣式不沖突，不會(huì)層疊

CSS繼承性 子承父業(yè)

所謂繼承性是指書(shū)寫(xiě)CSS樣式表時(shí)，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)。想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可。

適當(dāng)使用，不可濫用，好處減低了css的復(fù)雜度，子元素可以繼承父元素的哪些樣式(color,text-,font-,line-)

CSS優(yōu)先級(jí)

定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問(wèn)題。

繼承樣式的權(quán)重為0，即在嵌套結(jié)構(gòu)中，不管父元素的權(quán)重多大，被子元素繼承是，權(quán)重都為0.

行內(nèi)樣式優(yōu)先。行內(nèi)樣式權(quán)重相當(dāng)高

權(quán)重相同時(shí)，層疊行，就近原則

css有一個(gè)命令 !important  優(yōu)先級(jí)最大

CSS的特殊性(Specificity)

關(guān)于css 的權(quán)重，我們需要一套公式，就叫CSS的特殊性(Specificity)，我們稱之為css特性或非凡性

css特性有四個(gè)數(shù)字組成，從左到右，左邊最大，數(shù)位沒(méi)有進(jìn)制，級(jí)別之間不可超越

1.數(shù)位之間沒(méi)有進(jìn)制，0005 0005=00010，
2.繼承的權(quán)重為0

總結(jié)優(yōu)先級(jí)
	1.!important
	2.行內(nèi)樣式
	3.id選擇器
	4.類(lèi)選擇器，屬性選擇器，偽元素，偽類(lèi)
	5.元素選擇器
	6.通配符選擇
	7.同一類(lèi)選擇就近原則
	
權(quán)重是優(yōu)先級(jí)的算法，層疊是優(yōu)先級(jí)的表現(xiàn)

盒子模型（CSS重點(diǎn)）

css三大模塊，盒子模型，浮動(dòng)，定位。

所謂盒子模型就是把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。

文字相當(dāng)于牛奶，把它放進(jìn)容器，也就我們的盒子。

萬(wàn)物皆是盒子

看透網(wǎng)頁(yè)布局的本質(zhì)

CSS 其實(shí)沒(méi)有太多邏輯可言 ， 類(lèi)似我們小時(shí)候玩的積木,我們可以自由的，隨意的擺放出我們想要的效果。

盒子模型（Box Model）

。首先，我們來(lái)看一張圖，來(lái)體會(huì)下什么是盒子模型。

所有的文檔元素（標(biāo)簽）都會(huì)生成一個(gè)矩形框，我們稱為元素框（element box），它描述了一個(gè)文檔元素在網(wǎng)頁(yè)布局匯總所占的位置大小。因此，每個(gè)盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。

盒子邊框（border）

盒子應(yīng)用于ie6以上，ie5的略過(guò)

語(yǔ)法：

border : border-width || border-style || border-color 
border: 1px solid red; 

邊框?qū)傩浴O(shè)置邊框樣式（border-style）

邊框樣式用于定義頁(yè)面中邊框的風(fēng)格，常用屬性值如下：

solid

dashed

盒子邊框?qū)懛偨Y(jié)表

border: 1px 2px 3px 3px 

表格的細(xì)線邊框

詳見(jiàn)案例

圓角邊框(CSS3)

之前的世界只有矩形，學(xué)了這個(gè)就不只矩形

border-radius(半徑): 左上 右上 右下 左下

詳見(jiàn)案例

內(nèi)邊距（padding）

padding屬性用于設(shè)置內(nèi)邊距。 是指 邊框與內(nèi)容之間的距離。

padding-top:上內(nèi)邊距

padding-right:右內(nèi)邊距

padding-bottom:下內(nèi)邊距

padding-left:左內(nèi)邊距

課堂案例： 新浪導(dǎo)航

外邊距（margin）

margin屬性用于設(shè)置外邊距。 設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”， 這段空白通常不能放置其他內(nèi)容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

margin:上外邊距 右外邊距 下外邊距 左外邊

取值順序跟內(nèi)邊距相同。

外邊距實(shí)現(xiàn)盒子居中

可以讓一個(gè)盒子實(shí)現(xiàn)水平居中，需要滿足一下兩個(gè)條件：

1. 必須是塊級(jí)元素。
2. 盒子必須指定了寬度（width）

然后就給左右的外邊距都設(shè)置為auto，就可使塊級(jí)元素水平居中。

文字盒子居中圖片和背景區(qū)別

1. 文字水平居中是 text-align: center

2. 盒子水平居中 左右margin 改為 auto

3. 插入圖片 我們用的最多 比如產(chǎn)品展示類(lèi)

4. 背景圖片我們一般用于小圖標(biāo)背景 或者 超大背景圖片

   ? background-position: center center;

清除元素的默認(rèn)內(nèi)外邊距

為了更方便地控制網(wǎng)頁(yè)中的元素，制作網(wǎng)頁(yè)時(shí)，需要清除元素的默認(rèn)內(nèi)外邊距：

外邊距合并

外邊距塌陷：

? 當(dāng)上下相鄰的兩個(gè)塊級(jí)元素相遇時(shí)，他們之間的垂直間距不是top，bottom的和，而是兩者的較大者，相鄰塊元素的垂直外邊距的合并

? 解決方案：把較大值改成期望的值

嵌套塊級(jí)元素垂直外邊距的合并

下午案例：