一、偽類選擇器

1.1查找單個(gè)元素

根據(jù)元素的結(jié)構(gòu)關(guān)系查找元素

查找第一個(gè)元素：標(biāo)簽名:first-child

查找最后一個(gè)元素：標(biāo)簽名：last-child

查找第n個(gè)元素：標(biāo)簽名：nth-child(n)

?1.2查找多個(gè)元素

:nth-child(公式）

偶數(shù)：2n

奇數(shù):2n+1;2n-1

5的倍數(shù)：5n

5以后的標(biāo)簽：n+5

5以前的標(biāo)簽:-n+5

二、偽元素選擇器

創(chuàng)建虛擬元素，用來(lái)擺放裝飾性的內(nèi)容

標(biāo)簽名:before：在標(biāo)簽選中的元素最前面添加一個(gè)元素

標(biāo)簽名:after：在標(biāo)簽選中的元素最后面添加一個(gè)元素

必須設(shè)置content屬性，否則不生效

三、盒子模型

組成部分

內(nèi)容區(qū)域：width&height

內(nèi)邊距：padding（內(nèi)容與盒子的邊距）會(huì)撐大盒子

邊框線：border? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?會(huì)撐大盒子

外邊距：margin（出現(xiàn)在盒子外面）

3.1邊框線

border(bd)

屬性值（不區(qū)分先后順序）：邊框線粗細(xì) 線條樣式 顏色? ?

?常用線條樣式

實(shí)線：solid

虛線：dashed

點(diǎn)線：dottted

3.2盒子模型-尺寸計(jì)算

盒子尺寸：內(nèi)容尺寸+bored尺寸+內(nèi)邊距

?內(nèi)邊距和邊框線會(huì)撐大盒子

解決辦法

手動(dòng)做減法：減掉border/padding的尺寸

內(nèi)減模式：box-sizing:border-box

3.3外邊距

拉開(kāi)兩個(gè)盒子的距離

屬性名：margin

與padding屬性值寫(xiě)法、含義相同?

3.4版心居中

margin：0 auto?

四、清楚默認(rèn)樣式

*{

margin:0;

padding:0;

}

4.1去掉列表的項(xiàng)目符號(hào)

list-style：none?

五、盒子模型-元素溢出

控制溢出元素的顯示方式

屬性名：overflow

屬性值

hidden：溢出隱藏

scroll：溢出滾動(dòng)（沒(méi)溢出也有滾動(dòng)條）

auto：溢出滾動(dòng)（溢出時(shí)才有滾動(dòng)條）

六、外邊距問(wèn)題

6.1合并現(xiàn)象

垂直排列的兄弟元素，margin會(huì)合并

現(xiàn)象：取兩個(gè)margin較大的值生效

?6.2塌陷問(wèn)題

父子級(jí)的標(biāo)簽，子級(jí)添加上外邊距，會(huì)產(chǎn)生塌陷問(wèn)題

現(xiàn)象：導(dǎo)致父級(jí)一起向下移動(dòng)

解決方法：

取消自己的margin，父級(jí)設(shè)置padding

父級(jí)設(shè)置overflow:hidden

父級(jí)設(shè)置：border-top

七、行內(nèi)元素-內(nèi)外邊距問(wèn)題

行內(nèi)元素添加margin和padding，無(wú)法改變?cè)卮怪蔽恢?/p>

解決方法：

給行內(nèi)元素添加行高可以改變垂直位置

八、盒子模型-圓角

設(shè)置元素的外邊框?yàn)閳A角

屬性名：border-radius

屬性值：數(shù)字+px/百分比

從左上順時(shí)針取值，沒(méi)有取值的角與對(duì)角相等

8.1正圓狀態(tài)

給正方形設(shè)置屬性值為寬高的一半/50%

最大值為50%，超過(guò)無(wú)效

8.2膠囊形狀

?給長(zhǎng)方形盒子設(shè)置屬性值為高度的一半

九、盒子模型-陰影

給元素設(shè)置陰影效果

屬性名：box-shadow

屬性值：X軸偏移量 Y軸偏移量 模糊半徑 擴(kuò)散半徑 顏色 內(nèi)外陰影

注意：

X軸偏移量和Y軸偏移量必須書(shū)寫(xiě)

默認(rèn)是外陰影，內(nèi)陰影需要添加inset?

十、css書(shū)寫(xiě)順序

1.盒子模型屬性

2.文字樣式

3.圓角、陰影等屬性

十一、小圖標(biāo)技巧

設(shè)置為背景圖，不平鋪 ，垂直居中，不想覆蓋在文字上就是用邊距拉開(kāi)?