柚子快報(bào)激活碼778899分享：DAY05 CSS

http://yzkb.51969.com/

文章目錄

1 CSS選擇器(Selectors)8. 后代(包含)選擇器9. 直接子代選擇器10. 兄弟選擇器11. 相鄰兄弟選擇器12. 屬性選擇器

2 偽元素3 CSS樣式優(yōu)先級(jí)1. 相同選擇器不同樣式2. 相同選擇器相同樣式3. 繼承現(xiàn)象4. 選擇器不同權(quán)值的計(jì)算

4 CSS中的值和單位1. 顏色表示法2. 尺寸表示法

5 頁(yè)面元素的顯示模式6 流與文檔流7 CSS盒子模型拓展作業(yè)

1 CSS選擇器(Selectors)

8. 后代(包含)選擇器

接續(xù)第四天的 DAY04CSS… 選中某個(gè)元素內(nèi)的兒子、孫子、重孫子…元素 祖先選擇器 后代選擇器 { } 例如 div span { } 選中div下的所有span 易錯(cuò)點(diǎn):空格別忘記寫！ 使用場(chǎng)景: 內(nèi)容結(jié)構(gòu)比較簡(jiǎn)單，沒(méi)有那么多相同標(biāo)簽

9. 直接子代選擇器

選中元素下面的直接兒子元素 div>span { } 選中div下的所有兒子span 直接子代選擇器也可以多層逐級(jí)向下選擇需要的元素

10. 兄弟選擇器

選中元素后面的所有兄弟元素——不要前面的兄弟，也不要子代 p~span { }` 選中p后面的所有的span兄弟元素

11. 相鄰兄弟選擇器

選中元素后面緊挨著的相鄰兄弟元素——不要前面的，也不要有間隔的，最多選中1個(gè) p+span { }` 選中p元素后面的緊挨著的那一個(gè)span兄弟元素

12. 屬性選擇器

[html標(biāo)簽的屬性名]{ } 選中包含指定屬性名的元素 [html標(biāo)簽的屬性名="值"]{ } 選中包含指定屬性名與屬性值的元素

2 偽元素

偽元素就是我們給指定元素內(nèi)部的前面/后面添加的內(nèi)容，我們還可以對(duì)添加的內(nèi)容進(jìn)行樣式設(shè)置 ::before { } 表示在元素內(nèi)部的最前面位置插入內(nèi)容 ::after { } 表示在元素內(nèi)部的最后面位置插入內(nèi)容 注意：content屬性必須寫，如果暫時(shí)沒(méi)有具體內(nèi)容，可以寫成content:'';

3 CSS樣式優(yōu)先級(jí)

1. 相同選擇器不同樣式

當(dāng)多個(gè)選擇器選中了同一個(gè)元素，想要渲染不同的樣式，會(huì)疊加效果 p { color: red; } .txt { background-color: yellow; }

2. 相同選擇器相同樣式

相同選擇器選中同一個(gè)元素，而且要設(shè)置相同的屬性，會(huì)采用順序讀取的原則，后面覆蓋前面的 .txt {background-color: yellow;} .txt {background-color: green;}

3. 繼承現(xiàn)象

在CSS中，有一些屬性是具有繼承特性的，也就是父元素的CSS屬性會(huì)傳遞給子元素 最近的祖先樣式比其他祖先樣式優(yōu)先級(jí)高，就近原則 指定樣式的優(yōu)先級(jí)大于繼承樣式

4. 選擇器不同權(quán)值的計(jì)算

原則： 權(quán)值大的優(yōu)先渲染 !important > 行內(nèi)樣式 > ID選擇器>（類選擇器=偽類選擇器）>標(biāo)簽名選擇器>通用選擇器>繼承 權(quán)值會(huì)累加，但是不會(huì)越級(jí)！ 比如11個(gè)類選擇器，值不是10*11=110，而是99.9不會(huì)越級(jí)到下一級(jí) 選擇器優(yōu)先級(jí)訣竅:控制范圍越大的，優(yōu)先級(jí)越低

4 CSS中的值和單位

1. 顏色表示法

注意:rgba(255,0,0,1)表示紅色 ，最后一位的含義 1是完全不透明 0是完全透明 0.5半透明，如果是小數(shù)可以簡(jiǎn)寫為 .小數(shù)部分。如0.5可以簡(jiǎn)寫為 .5。

2. 尺寸表示法

5 頁(yè)面元素的顯示模式

一個(gè)HTML元素可以有多種顯示模式 塊級(jí)元素——display:block; 常見(jiàn)標(biāo)簽：div h1~h6 p form table ul li… 排列方式：按照書寫的順序，從上往下依次排列 獨(dú)占一行(一行指的是占父級(jí)元素寬度的100%)，還可以自設(shè)寬高

行內(nèi)元素——display:inline; 常見(jiàn)標(biāo)簽：span a i b … 排列方式：按照書寫順序從左往右依次排列，可以和其他內(nèi)容同行，一行放不下才顯示在下一行，無(wú)法設(shè)置寬度和高度，行內(nèi)元素的大小是靠?jī)?nèi)容撐起來(lái)的 img元素是特殊的行內(nèi)元素，它自己有寬高，還可以修改寬高

行內(nèi)塊元素——display:inline-block; 常見(jiàn)標(biāo)簽：input button 既有行內(nèi)元素的特點(diǎn)，也有塊級(jí)元素的特點(diǎn)： 可以與其他元素共處一行(行內(nèi)) 可以設(shè)置寬度與高度(塊級(jí))

6 流與文檔流

7 CSS盒子模型

一個(gè)HTML元素，需要占用頁(yè)面的空間，內(nèi)容、邊框、內(nèi)容與邊框之間的距離、不同元素之間的距離都需要占用頁(yè)面空間，所以我們需要了解具體的計(jì)算方式。 content: 內(nèi)容區(qū)域 padding：內(nèi)間距—指的是內(nèi)容與邊框之間的距離 border: 邊框 margin：外間距——指的是元素與元素之間的距離 涉及到四個(gè)方向:lef左 right右 top上 bottom下

一個(gè)元素在水平方向上占用的總空間：中英文都要 一個(gè)元素在豎直方向上占用的總空間：中英文都要

拓展

面試題：如果兩張圖片中間想要留一點(diǎn)空白，可以有哪些實(shí)現(xiàn)方案?哪種好？為什么？

作業(yè)

1.自行總結(jié)并記憶HTML元素的三種顯示模式和他們的特點(diǎn) 2.自行總結(jié)歸納 默認(rèn)盒子模型總大小的計(jì)算公式 3.面試題還未講完，先總結(jié)好剛剛講到的3種方案 4.完成漢唐首頁(yè)導(dǎo)航欄 5.完成"華碩無(wú)雙"商品卡片 盡量做到高仿，不一樣沒(méi)關(guān)系，明天會(huì)講，先嘗試自己解決問(wèn)題

柚子快報(bào)激活碼778899分享：DAY05 CSS

http://yzkb.51969.com/

精彩文章