一、偽類選擇器

1.1查找單個元素

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

查找第一個元素：標簽名:first-child

查找最后一個元素：標簽名：last-child

查找第n個元素：標簽名：nth-child(n)

?1.2查找多個元素

:nth-child(公式）

偶數(shù)：2n

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

5的倍數(shù)：5n

5以后的標簽：n+5

5以前的標簽:-n+5

二、偽元素選擇器

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

標簽名:before：在標簽選中的元素最前面添加一個元素

標簽名:after：在標簽選中的元素最后面添加一個元素

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

三、盒子模型

組成部分

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

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

邊框線：border? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?會撐大盒子

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

3.1邊框線

border(bd)

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

?常用線條樣式

實線：solid

虛線：dashed

點線：dottted

3.2盒子模型-尺寸計算

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

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

解決辦法

手動做減法：減掉border/padding的尺寸

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

3.3外邊距

拉開兩個盒子的距離

屬性名：margin

與padding屬性值寫法、含義相同?

3.4版心居中

margin：0 auto?

四、清楚默認樣式

*{

margin:0;

padding:0;

}

4.1去掉列表的項目符號

list-style：none?

五、盒子模型-元素溢出

控制溢出元素的顯示方式

屬性名：overflow

屬性值

hidden：溢出隱藏

scroll：溢出滾動（沒溢出也有滾動條）

auto：溢出滾動（溢出時才有滾動條）

六、外邊距問題

6.1合并現(xiàn)象

垂直排列的兄弟元素，margin會合并

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

?6.2塌陷問題

父子級的標簽，子級添加上外邊距，會產(chǎn)生塌陷問題

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

解決方法：

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

父級設(shè)置overflow:hidden

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

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

行內(nèi)元素添加margin和padding，無法改變元素垂直位置

解決方法：

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

八、盒子模型-圓角

設(shè)置元素的外邊框為圓角

屬性名：border-radius

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

從左上順時針取值，沒有取值的角與對角相等

8.1正圓狀態(tài)

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

最大值為50%，超過無效

8.2膠囊形狀

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

九、盒子模型-陰影

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

屬性名：box-shadow

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

注意：

X軸偏移量和Y軸偏移量必須書寫

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

十、css書寫順序

1.盒子模型屬性

2.文字樣式

3.圓角、陰影等屬性

十一、小圖標技巧

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