柚子快報激活碼778899分享：html CSS樣式

http://yzkb.51969.com/

目錄

1.基礎(chǔ)選擇器

1.1.標(biāo)簽選擇器

1.2.類選擇器

1.3.id選擇器

1.4.通配符選擇器

2.字體和文本樣式

2.1.字體樣式

2.1.1.字體大小

2.1.2.字體粗細

2.1.3.字體樣式（是否傾斜）

2.1.4.常見字體系列（了解）

2.1.5.字體系列font-family

2.1.6.字體font相關(guān)屬性的連寫

2.2.文本樣式

2.2.1.文本縮進

2.2.2.文本水平對齊方式

2.2.3.文本修飾

2.3.line-height行高

3.選擇器進階

3.1.復(fù)合選擇器

3.1.1.后代選擇器：空格

3.1.2.子代選擇器：>

3.2.并集選擇器

3.3.交集選擇器

3.4.hover偽類選擇器

3.5.Emmet語法

4.背景相關(guān)屬性

4.1.背景顏色

4.2.背景圖片

4.3.背景平鋪

4.4.背景位置

4.5.背景相關(guān)屬性連寫

4.6.（拓展）img標(biāo)簽和背景圖片的區(qū)別

5.元素顯示模式

5.1.塊級元素

5.2.行內(nèi)元素

5.3.行塊內(nèi)元素

5.4.元素顯示模式轉(zhuǎn)換

5.5.拓展

6.CSS特性

6.1.繼承性

6.2.層疊性

6.3.優(yōu)先級

7.盒子模型

7.1.內(nèi)容區(qū)域的寬度和高度

7.2.邊框（border）?

7.2.1.邊框（border）- 單個屬性

7.2.2.邊框（border）- 連寫形式

7.2.3.邊框（border）- 單方向設(shè)置

7.2.4.盒子實際大小初級計算公式

7.2.5盒子實際大小初級計算公式：

7.3.內(nèi)邊距（padding）

7.3.1.內(nèi)邊距（padding）- 取值

7.3.2.內(nèi)邊距（padding）- 單方向設(shè)置

7.3.3.盒子實際大小終極計算公式

7.3.4.CSS3盒子模型（自動內(nèi)減）

7.4.外邊距（margin）

7.4.1.外邊距（margin）- 取值

7.4.2.外邊距（margin）- 單方向設(shè)置

7.4.3.清除默認內(nèi)外邊距

7.4.4.外邊距折疊現(xiàn)象- ①?合并現(xiàn)象

7.4.5.外邊距折疊現(xiàn)象-②?塌陷現(xiàn)象

7.4.6.行內(nèi)元素的margin和padding無效情況

8.CSS布局

8.1.結(jié)構(gòu)偽類選擇器

8.2.偽元素

8.3.標(biāo)準(zhǔn)流

8.4.浮動

8.4.1.浮動的代碼

8.4.2.浮動的特點

8.4.3.清除浮動

8.5.定位

8.5.1.定位的基本使用步驟

8.5.2.靜態(tài)定位

8.5.3.相對定位

8.5.4.絕對定位

8.5.5.子絕父相

8.5.6.固定定位

8.5.7.元素的層級關(guān)系

8.6.裝飾

8.6.1.垂直對齊方式

8.6.2.光標(biāo)類型

8.6.3.邊框圓角

8.6.4.overflow溢出部分顯示

8.6.5.元素本身隱藏

8.6.6.（拓展）元素整體透明度

8.6.7.（拓展）邊框合并

8.6.8.（拓展）用CSS畫三角形技巧（面試題）

8.7.選擇器拓展

8.7.1.鏈接偽類選擇器

8.7.2.焦點偽類選擇器

8.7.3.屬性選擇器

9.網(wǎng)頁制作流程

9.1.根目錄

9.2.布局流程

?

CSS：層疊樣式表（Cascading style sheets）給頁面中的HTML標(biāo)簽設(shè)置樣式

1.基礎(chǔ)選擇器

1.1.標(biāo)簽選擇器

結(jié)構(gòu)：標(biāo)簽名 { css屬性名：屬性值； }?

作用：通過標(biāo)簽名，找到頁面中所有這類標(biāo)簽，設(shè)置樣式

注意點：?

標(biāo)簽選擇器選擇的是一類標(biāo)簽，而不是單獨某一個標(biāo)簽選擇器無論嵌套關(guān)系有多深，都能找到對應(yīng)的標(biāo)簽

1.2.類選擇器

結(jié)構(gòu)：.類名 { css屬性名：屬性值； }?

作用：通過類名，找到頁面中所有帶有這個類名的標(biāo)簽，設(shè)置樣式

注意點：?

所有標(biāo)簽上都有class屬性，class屬性的屬性值稱為類名（類似于名字）類名可以由數(shù)字、字母、下劃線、中劃線組成，但不能以數(shù)字或者中劃線開頭一個標(biāo)簽可以同時有多個類名，類名之間以空格隔開類名可以重復(fù)，一個類選擇器可以同時選中多個標(biāo)簽

1.3.id選擇器

結(jié)構(gòu)：#id屬性值 { css屬性名：屬性值； }?

作用：通過id屬性值，找到頁面中帶有這個id屬性值的標(biāo)簽，設(shè)置樣式

注意點：

所有標(biāo)簽上都有id屬性id屬性值類似于身份證號碼，在一個頁面中是唯一的，不可重復(fù)的！一個標(biāo)簽上只能有一個id屬性值?一個id選擇器只能選中一個標(biāo)簽

補充：類與id的區(qū)別

class類名與id屬性值的區(qū)別?

class類名相當(dāng)于姓名，可以重復(fù)，一個標(biāo)簽可以同時有多個class類名id屬性值相當(dāng)于身份證號碼，不可重復(fù)，一個標(biāo)簽只能有一個id屬性值

類選擇器與id選擇器的區(qū)別?

類選擇器以 .?開頭id選擇器以 #?開頭

實際開發(fā)的情況?

類選擇器用的最多id一般配合js使用，除非特殊情況，否則不要使用id設(shè)置樣式實際開發(fā)中會遇到冗余代碼的抽取?（可以將一些公共的代碼抽取到一個公共的類中去）

1.4.通配符選擇器

結(jié)構(gòu)：* { css屬性名：屬性值； }?

作用：找到頁面中所有的標(biāo)簽，設(shè)置樣式

注意點：?

開發(fā)中使用極少，只會在極特殊情況下才會用到在基礎(chǔ)班小頁面中可能會用于去除標(biāo)簽?zāi)J的margin和padding

2.字體和文本樣式

2.1.字體樣式

2.1.1.字體大小

屬性名：font-size

取值：數(shù)字+px

注意點：

谷歌瀏覽器默認文字大小是16px單位需要設(shè)置，否則無效

2.1.2.字體粗細

屬性名：font-weight

取值：

關(guān)鍵字

正常?normal

加粗?bold

純數(shù)字：100~900的整百數(shù)

正常 400

加粗 700

注意點：

不是所有字體都提供了九種粗細，因此部分取值頁面中無變化實際開發(fā)中以：正常、加粗兩種取值使用最多。

2.1.3.字體樣式（是否傾斜）

屬性名：font-style

取值：

正常（默認值）：normal

傾斜：italic

2.1.4.常見字體系列（了解）

無襯線字體（sans-serif）?

特點：文字筆畫粗細均勻，并且首尾無裝飾場景：網(wǎng)頁中大多采用無襯線字體常見該系列字體：黑體、Arial

襯線字體（serif）?

特點：文字筆畫粗細不均，并且首尾有筆鋒裝飾場景：報刊書籍中應(yīng)用廣泛常見該系列字體：宋體、Times New Roman

等寬字體（monospace）?

特點：每個字母或文字的寬度相等場景：一般用于程序代碼編寫，有利于代碼的閱讀和編寫常見該系列字體：Consolas、fira code

2.1.5.字體系列font-family

屬性名：font-family?

常見取值：具體字體1,具體字體2,具體字體3,具體字體4,...,字體系列?

具體字體："Microsoft YaHei"、微軟雅黑、黑體、宋體、楷體等……字體系列：sans-serif、serif、monospace等……

渲染規(guī)則：?

從左往右按照順序查找，如果電腦中未安裝該字體，則顯示下一個字體如果都不支持，此時會根據(jù)操作系統(tǒng)，顯示最后字體系列的默認字體

注意點：?

如果字體名稱中存在多個單詞，推薦使用引號包裹最后一項字體系列不需要引號包裹網(wǎng)頁開發(fā)時，盡量使用系統(tǒng)常見自帶字體，保證不同用戶瀏覽網(wǎng)頁都可以正確顯示

2.1.6.字體font相關(guān)屬性的連寫

屬性名：font (復(fù)合屬性)?

取值：?

font : style weight size family;?

省略要求：?

只能省略前兩個，如果省略了相當(dāng)于設(shè)置了默認值

注意點：如果需要同時設(shè)置單獨和連寫形式

要么把單獨的樣式寫在連寫的下面要么把單獨的樣式寫在連寫的里面

2.2.文本樣式

2.2.1.文本縮進

屬性名：text-indent?

取值：?

數(shù)字+px?數(shù)字+em（推薦：1em = 當(dāng)前標(biāo)簽的font-size的大?。?/p>

2.2.2.文本水平對齊方式

屬性名：text-align

取值：

?

?

注意點：

如果需要讓文本水平居中，text-align屬性給文本所在標(biāo)簽（文本的父元素）設(shè)置

2.2.3.文本修飾

屬性名：text-decoration

取值：

?

?

注意點：

開發(fā)中會使用text-decoration:none;清除a標(biāo)簽?zāi)J的下劃線

2.3.line-height行高

作用：控制一行的上下行間距

屬性名：line-height?

取值： ? 數(shù)字+px ? 倍數(shù)（當(dāng)前標(biāo)簽font-size的倍數(shù)）?

應(yīng)用：?

讓單行文本垂直居中可以設(shè)置 line-height : 文字父元素高度?網(wǎng)頁精準(zhǔn)布局時，會設(shè)置 line-height : 1?可以取消上下間距

行高與font連寫的注意點：?

如果同時設(shè)置了行高和font連寫，注意覆蓋問題font :?style weight size/line-height family ;

拓展 顏色常見取值（了解）

屬性名：?

如：文字顏色：color如：背景顏色：background-color

屬性值：

?

標(biāo)簽水平居中方法總結(jié) margin: 0 auto

如果需要讓div、p、h（大盒子）水平居中，可通過margin: 0 auto;實現(xiàn)

注意點：

如果需要讓div、p、h水平居中，直接給當(dāng)前元素本身設(shè)置即可margin: 0 auto?一般針對于固定寬度的盒子，如果大盒子沒有設(shè)置寬度，此時會默認占滿父元素的寬度

3.選擇器進階

3.1.復(fù)合選擇器

3.1.1.后代選擇器：空格

作用：根據(jù) HTML?標(biāo)簽的嵌套關(guān)系，選擇父元素 后代中?滿足條件的元素

選擇器語法：選擇器1 選擇器2 { css }?

結(jié)果：?

在選擇器1所找到標(biāo)簽的后代（兒子、孫子、重孫子…）中，找到滿足選擇器2的標(biāo)簽，設(shè)置樣式

注意點：?

后代包括：兒子、孫子、重孫子……后代選擇器中，選擇器與選擇器之前通過 空格 隔開

3.1.2.子代選擇器：>

作用：根據(jù) HTML?標(biāo)簽的嵌套關(guān)系，選擇父元素 子代中 滿足條件的元素

選擇器語法：選擇器1 > 選擇器2 { css }?

結(jié)果：?

在選擇器1所找到標(biāo)簽的子代（兒子）中，找到滿足選擇器2的標(biāo)簽，設(shè)置樣式

注意點：

子代只包括：兒子子代選擇器中，選擇器與選擇器之前通過 >?隔開

3.2.并集選擇器

并集選擇器：,

作用：同時選擇多組標(biāo)簽，設(shè)置相同的樣式

選擇器語法：選擇器1 ， 選擇器2 { css }?

結(jié)果：?

找到 選擇器1 和 選擇器2 選中的標(biāo)簽，設(shè)置樣式

注意點：?

并集選擇器中的每組選擇器之間通過 , 分隔并集選擇器中的每組選擇器可以是基礎(chǔ)選擇器或者復(fù)合選擇器并集選擇器中的每組選擇器通常一行寫一個，提高代碼的可讀

3.3.交集選擇器

交集選擇器：緊挨著

作用：選中頁面中 同時滿足?多個選擇器的標(biāo)簽

選擇器語法：選擇器1選擇器2 { css }?

結(jié)果：?

（既又原則）找到頁面中 既?能被選擇器1選中，又?能被選擇器2選中的標(biāo)簽，設(shè)置樣式

注意點：?

交集選擇器中的選擇器之間是緊挨著的，沒有東西分隔交集選擇器中如果有標(biāo)簽選擇器，標(biāo)簽選擇器必須寫在最前面

3.4.hover偽類選擇器

作用：選中鼠標(biāo)懸停在元素上的狀態(tài)，設(shè)置樣式

選擇器語法：選擇器:hover { css }?

注意點：?

偽類選擇器選中的元素的某種狀態(tài)

3.5.Emmet語法

作用：通過簡寫語法，快速生成代碼

語法：?

類似于剛剛學(xué)習(xí)的選擇器的寫法

?

4.背景相關(guān)屬性

4.1.背景顏色

屬性名：background-color（bgc）?

屬性值：?

顏色取值：關(guān)鍵字、rgb表示法、rgba表示法、十六進制……

注意點：?

背景顏色默認值是透明： rgba(0,0,0,0) 、transparent背景顏色不會影響盒子大小，并且還能看清盒子的大小和位置，一般在布局中會習(xí)慣先給盒子設(shè)置背景顏色

4.2.背景圖片

屬性名：background-image（bgi）?

屬性值： background-image: url('圖片的路徑')

注意點：?

背景圖片中url中可以省略引號背景圖片默認是在水平和垂直方向平鋪的背景圖片僅僅是指給盒子起到裝飾效果，類似于背景顏色，是不能撐開盒子的

4.3.背景平鋪

屬性名：background-repeat（bgr）

屬性值：

?

?

4.4.背景位置

屬性名：background-position（bgp）

屬性值：background-position: 水平方向位置 垂直方向位置;

?

?

注意點：

方位名詞取值和坐標(biāo)取值可以混使用，第一個取值表示水平，第二個取值表示垂直

4.5.背景相關(guān)屬性連寫

屬性名：background（bg）?

屬性值：?

單個屬性值的合寫，取值之間以空格隔開

書寫順序：?

推薦：background：color image repeat position?

省略問題：?

可以按照需求省略特殊情況：在pc端，如果盒子大小和背景圖片大小一樣，此時可以直接寫 background：url()?

注意點?

如果需要設(shè)置單獨的樣式和連寫①?要么把單獨的樣式寫在連寫的下面②?要么把單獨的樣式寫在連寫的里面

4.6.（拓展）img標(biāo)簽和背景圖片的區(qū)別

需求：需要在網(wǎng)頁中展示一張圖片的效果？

方法一：直接寫上img標(biāo)簽即可?

img標(biāo)簽是一個標(biāo)簽，不設(shè)置寬高默認會以原尺寸顯示

方法二：div標(biāo)簽 + 背景圖片?

需要設(shè)置div的寬高，因為背景圖片只是裝飾的CSS樣式，不能撐開div標(biāo)簽

5.元素顯示模式

5.1.塊級元素

顯示特點：?

獨占一行（一行只能顯示一個）寬度默認是父元素的寬度，高度默認由內(nèi)容撐開可以設(shè)置寬高

代表標(biāo)簽：?

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

5.2.行內(nèi)元素

顯示特點：?

一行可以顯示多個寬度和高度默認由內(nèi)容撐開不可以設(shè)置寬高

代表標(biāo)簽：?

a、span?、b、u、i、s、strong、ins、em、del……

5.3.行內(nèi)塊元素

顯示特點：?

一行可以顯示多個可以設(shè)置寬高

代表標(biāo)簽：?

input、textarea、button、select……特殊情況：img標(biāo)簽有行內(nèi)塊元素特點，但是Chrome調(diào)試工具中顯示結(jié)果是inline

5.4.元素顯示模式轉(zhuǎn)換

目的：改變元素默認的顯示特點，讓元素符合布局要求

語法：

?

5.5.拓展

1.HTML嵌套規(guī)范注意點

塊級元素一般作為大容器，可以嵌套：文本、塊級元素、行內(nèi)元素、行內(nèi)塊元素等等……

但是：p標(biāo)簽中不要嵌套div、p、h等塊級元素?

a標(biāo)簽內(nèi)部可以嵌套任意元素?

但是：a標(biāo)簽不能嵌套a標(biāo)簽

2.居中方法總結(jié)

?

6.CSS特性

6.1.繼承性

特性：子元素有默認繼承父元素樣式的特點（子承父業(yè)）

可以繼承的常見屬性(文字控制屬性都可以繼承)?

color?font-style、font-weight、font-size、font-family?text-indent、text-align?line-height?……?

注意點：?

可以通過調(diào)試工具判斷樣式是否可以繼承

（拓展）繼承的應(yīng)用

好處：可以在一定程度上減少代碼

常見應(yīng)用場景：?

可以直接給ul設(shè)置 list-style:none?屬性，從而去除列表默認的小圓點樣式直接給body標(biāo)簽設(shè)置統(tǒng)一的font-size，從而統(tǒng)一不同瀏覽器默認文字大小

（拓展）繼承失效的特殊情況

如果元素有瀏覽器默認樣式，此時繼承性依然存在，但是優(yōu)先顯示瀏覽器的默認樣式?

a標(biāo)簽的color會繼承失效

其實color屬性繼承下來了，但是被瀏覽器默認設(shè)置的樣式給覆蓋掉了h系列標(biāo)簽的font-size會繼承失效

其實font-size屬性繼承下來了，但是被瀏覽器默認設(shè)置的樣式給覆蓋掉了

6.2.層疊性

特性：?

給同一個標(biāo)簽設(shè)置不同的樣式 →?此時樣式會層疊疊加 →?會共同作用在標(biāo)簽上給同一個標(biāo)簽設(shè)置相同的樣式 →?此時樣式會層疊覆蓋 →?最終寫在最后的樣式會生效

注意點：?

當(dāng)樣式?jīng)_突時，只有當(dāng)選擇器優(yōu)先級相同時，才能通過層疊性判斷結(jié)果

多行內(nèi)容同時編輯：alt+shift

6.3.優(yōu)先級

特性：不同選擇器具有不同的優(yōu)先級，優(yōu)先級高的選擇器樣式會覆蓋優(yōu)先級低選擇器樣式

優(yōu)先級公式：?

繼承 < 通配符選擇器 < 標(biāo)簽選擇器 < 類選擇器 < id選擇器 < 行內(nèi)樣式 < !important?

注意點：?

!important寫在屬性值的后面，分號的前面！!important不能提升繼承的優(yōu)先級，只要是繼承優(yōu)先級最低！實際開發(fā)中不建議使用 !important?。

權(quán)重疊加計算

場景：如果是復(fù)合選擇器，此時需要通過權(quán)重疊加計算方法，判斷最終哪個選擇器優(yōu)先級最高會生效

權(quán)重疊加計算公式：（每一級之間不存在進位）?

?

比較規(guī)則：?

先比較第一級數(shù)字，如果比較出來了，之后的統(tǒng)統(tǒng)不看 2如果第一級數(shù)字相同，此時再去比較第二級數(shù)字，如果比較出來了，之后的統(tǒng)統(tǒng)不看……如果最終所有數(shù)字都相同，表示優(yōu)先級相同，則比較層疊性（誰寫在下面，誰說了算!）

注意點：

!important如果不是繼承，則權(quán)重最高，天下第一！

（拓展）查錯流程（遇到樣式出不來，要學(xué)會通過調(diào)試工具找錯）

?

7.盒子模型

7.1.內(nèi)容區(qū)域的寬度和高度

作用：利用 width?和 height?屬性默認設(shè)置是盒子 內(nèi)容區(qū)域?的大小

屬性：width / height?

常見取值：數(shù)字+px

?

7.2.邊框（border）?

7.2.1.邊框（border）- 單個屬性

作用：給設(shè)置邊框粗細、邊框樣式、邊框顏色效果

單個屬性：

?

7.2.2.邊框（border）- 連寫形式

屬性名：border

屬性值：單個取值的連寫，取值之間以空格隔開

如：border : 10px solid red;

快捷鍵：bd + tab

7.2.3.邊框（border）- 單方向設(shè)置

場景：只給盒子的某個方向單獨設(shè)置邊框

屬性名：border - 方位名詞

屬性值：連寫的取值

7.2.4.盒子實際大小初級計算公式

需求：盒子尺寸 400*400，背景綠色，邊框10px?實線 黑色，如何完成？

注意點：?①?設(shè)置width和height是內(nèi)容的寬高！②?設(shè)置border會撐大盒子！

7.2.5盒子實際大小初級計算公式：

盒子寬度 = 左邊框 + 內(nèi)容寬度 + 右邊框盒子高度 = 上邊框 + 內(nèi)容高度 + 下邊框

解決：當(dāng)盒子被border撐大后，如何滿足需求？

解決：計算多余大小，手動在內(nèi)容中減去（手動內(nèi)減）

?

?

7.3.內(nèi)邊距（padding）

7.3.1.內(nèi)邊距（padding）- 取值

作用：設(shè)置 邊框?與 內(nèi)容區(qū)域?之間的距離

屬性名：padding?

常見取值：

?

記憶規(guī)則：從上開始賦值，然后順時針賦值，如果設(shè)置賦值的，看對面的??！

7.3.2.內(nèi)邊距（padding）- 單方向設(shè)置

場景：只給盒子的某個方向單獨設(shè)置內(nèi)邊距

屬性名：padding - 方位名詞?

屬性值：數(shù)字 + px

7.3.3.盒子實際大小終極計算公式

需求：盒子尺寸300*300，背景粉色，邊框10px實線黑色，上下左右20px的內(nèi)邊距，如何完成？

注意點：①?設(shè)置width和height是內(nèi)容的寬高?、?設(shè)置border會撐大盒子 ③?設(shè)置padding會撐大盒子

盒子實際大小終極計算公式：?

盒子寬度 = 左邊框 + 左padding + 內(nèi)容寬度 + 右padding + 右邊框盒子高度 = 上邊框 + 上padding + 內(nèi)容寬度 + 下padding + 下邊框

解決：當(dāng)盒子被border和padding撐大后，如何滿足需求？

自己計算多余大小，手動在內(nèi)容中減去（手動內(nèi)減）

7.3.4.CSS3盒子模型（自動內(nèi)減）

需求：盒子尺寸300*300，背景粉色，邊框10px實線黑色，上下左右20px的內(nèi)邊距，如何完成？

給盒子設(shè)置border或padding時，盒子會被撐大，如果不想盒子被撐大？

解決方法 ①?：手動內(nèi)減?

操作：自己計算多余大小，手動在內(nèi)容中減去缺點：項目中計算量太大，很麻煩

解決方法 ②?：自動內(nèi)減?

操作：給盒子設(shè)置屬性 box-sizing : border-box ;?即可優(yōu)點：瀏覽器會自動計算多余大小，自動在內(nèi)容中減去

7.4.外邊距（margin）

7.4.1.外邊距（margin）- 取值

作用：設(shè)置邊框以外，盒子與盒子之間的距離

屬性名：margin?

常見取值：

?

?

記憶規(guī)則：從上開始賦值，然后順時針賦值，如果設(shè)置賦值的，看對面的??！

7.4.2.外邊距（margin）- 單方向設(shè)置

場景：只給盒子的某個方向單獨設(shè)置外邊距

屬性名：margin - 方位名詞?

屬性值：數(shù)字 + px

應(yīng)用：

?

7.4.3.清除默認內(nèi)外邊距

場景：瀏覽器會默認給部分標(biāo)簽設(shè)置默認的margin和padding，但一般在項目開始前需要先清除這些標(biāo)簽?zāi)J的 margin和padding，后續(xù)自己設(shè)置

比如：body標(biāo)簽?zāi)J有margin：8px?比如：p標(biāo)簽?zāi)J有上下的margin?比如：ul標(biāo)簽?zāi)J由上下的margin和padding-left?……

解決方法：

?

7.4.4.外邊距折疊現(xiàn)象- ①?合并現(xiàn)象

場景：垂直布局 的 塊級元素，上下的margin會合并

結(jié)果：最終兩者距離為margin的最大值

解決方法：避免就好

只給其中一個盒子設(shè)置margin即可

7.4.5.外邊距折疊現(xiàn)象-②?塌陷現(xiàn)象

場景：?互相嵌套?的 塊級元素，子元素的 margin-top?會作用在父元素上

結(jié)果：導(dǎo)致父元素一起往下移動

解決方法：?

給父元素設(shè)置border-top?或者 padding-top（分隔父子元素的margin-top）給父元素設(shè)置overflow：hidden?轉(zhuǎn)換成行內(nèi)塊元素設(shè)置浮動

7.4.6.行內(nèi)元素的margin和padding無效情況

場景：給行內(nèi)元素設(shè)置margin和padding時

結(jié)果：?

水平方向的margin和padding布局中有效！垂直方向的margin和padding布局中無效！

8.CSS布局

8.1.結(jié)構(gòu)偽類選擇器

目標(biāo)：能夠使用 結(jié)構(gòu)偽類選擇器 在HTML中定位元素

作用與優(yōu)勢：?

作用：根據(jù)元素在HTML中的結(jié)構(gòu)關(guān)系查找元素優(yōu)勢：減少對于HTML中類的依賴，有利于保持代碼整潔場景：常用于查找某父級選擇器中的子元素

選擇器：

?

注意點：

?

n的注意點：?

n為：0、1、2、3、4、5、6、……通過n可以組成常見公式

?

?

（了解）nth-of-type結(jié)構(gòu)偽類選擇器

選擇器：?

?

區(qū)別：?

:nth-child →?直接在所有孩子中數(shù)個數(shù)

:nth-of-type →?先通過該 類型 找到符合的一堆子元素，然后在這一堆子元素中數(shù)個數(shù)

8.2.偽元素

目標(biāo)：能夠使用 偽元素 在網(wǎng)頁中創(chuàng)建內(nèi)容

偽元素：一般頁面中的非主體內(nèi)容可以使用偽元素

區(qū)別：?

元素：HTML 設(shè)置的標(biāo)簽偽元素：由 CSS 模擬出的標(biāo)簽效果

種類：

?

注意點：?

必須設(shè)置content屬性才能生效偽元素默認是行內(nèi)元素

8.3.標(biāo)準(zhǔn)流

目標(biāo)：能夠認識 標(biāo)準(zhǔn)流 的默認排布方式及其特點

標(biāo)準(zhǔn)流：又稱文檔流，是瀏覽器在渲染顯示網(wǎng)頁內(nèi)容時默認采用的一套排版規(guī)則，規(guī)定了應(yīng)該以何種方式排列元素

常見標(biāo)準(zhǔn)流排版規(guī)則：?

塊級元素：從上往下，垂直布局，獨占一行行內(nèi)元素 或 行內(nèi)塊元素：從左往右，水平布局，空間不夠自動折行

8.4.浮動

8.4.1.浮動的代碼

屬性名：float

屬性值：

?

?

8.4.2.浮動的特點

浮動元素會脫離標(biāo)準(zhǔn)流（簡稱：脫標(biāo)），在標(biāo)準(zhǔn)流中不占位置

相當(dāng)于從地面飄到了空中浮動元素比標(biāo)準(zhǔn)流高半個級別，可以覆蓋標(biāo)準(zhǔn)流中的元素浮動找浮動，下一個浮動元素會在上一個浮動元素后面左右浮動浮動元素有特殊的顯示效果

一行可以顯示多個可以設(shè)置寬高

注意點：?

浮動的元素不能通過text-align:center或者margin:0 auto

書寫網(wǎng)頁導(dǎo)航步驟：

清除默認的margin和padding?找到ul，去除小圓點找到li標(biāo)簽，設(shè)置浮動讓li一行中顯示找到a標(biāo)簽，設(shè)置寬高 →?a標(biāo)簽?zāi)J是行內(nèi)元素，默認不能設(shè)置寬高？？

方法一：給a標(biāo)簽設(shè)置 display : inline-block?方法二：給a標(biāo)簽設(shè)置 display : block?方法三：給a設(shè)置 float : left

8.4.3.清除浮動

目標(biāo)：能夠認識 清除浮動的目的，并且能夠使用 清除浮動的方法

8.4.3.1.清除浮動的方法一①?直接設(shè)置父元素高度

特點：?

優(yōu)點：簡單粗暴，方便缺點：有些布局中不能固定父元素高度。如：新聞列表、京東推薦模塊

8.4.3.2.清除浮動的方法 — ②?額外標(biāo)簽法

操作：

在父元素內(nèi)容的最后添加一個塊級元素給添加的塊級元素設(shè)置 clear:both?

特點：

缺點：會在頁面中添加額外的標(biāo)簽，會讓頁面的HTML結(jié)構(gòu)變得復(fù)雜

8.4.3.3.清除浮動的方法 — ③?單偽元素清除法

操作：用偽元素替代了額外標(biāo)簽

?基本寫法 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 補充寫法

?

特點：?

優(yōu)點：項目中使用，直接給標(biāo)簽加類即可清除浮動

8.4.3.4.清除浮動的方法 — ④?雙偽元素清除法

操作：?

?

?

特點：?

優(yōu)點：項目中使用，直接給標(biāo)簽加類即可清除浮動

8.4.3.5.清除浮動的方法 — ⑤?給父元素設(shè)置overflow : hidden

操作：?

直接給父元素設(shè)置 overflow : hidden

特點：?

優(yōu)點：方便

（拓展補充）BFC的介紹

塊格式化上下文（Block Formatting Context）：BFC?

是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。

創(chuàng)建BFC方法：?

html標(biāo)簽是BFC盒子浮動元素是BFC盒子行內(nèi)塊元素是BFC盒子overflow屬性取值不為visible。如：auto、hidden…?……

BFC盒子常見特點：?

BFC盒子會默認包裹住內(nèi)部子元素（標(biāo)準(zhǔn)流、浮動）→?應(yīng)用：清除浮動BFC盒子本身與子元素之間不存在margin的塌陷現(xiàn)象 →?應(yīng)用：解決margin的塌陷……

8.5.定位

8.5.1.定位的基本使用步驟

設(shè)置定位方式?

屬性名：position?常見屬性值：

?

?

設(shè)置偏移值

偏移值設(shè)置分為兩個方向，水平和垂直方向各選一個使用即可?

選取的原則一般是就近原則 （離哪邊近用哪個）

?

8.5.2.靜態(tài)定位

介紹：靜態(tài)定位是默認值，就是之前認識的標(biāo)準(zhǔn)流。

代碼： position : static

注意點：?

靜態(tài)定位就是之前標(biāo)準(zhǔn)流，不能通過方位屬性進行移動之后說的定位不包括靜態(tài)定位，一般特指后幾種：相對、絕對、固定

8.5.3.相對定位

介紹：自戀型定位，相對于自己之前的位置進行移動

代碼： position : relative;

特點：?

需要配合方位屬性實現(xiàn)移動相對于自己原來位置進行移動在頁面中占位置 →?沒有脫標(biāo)

應(yīng)用場景：?

配合絕對定位組CP（子絕父相）?用于小范圍的移動

8.5.4.絕對定位

介紹：拼爹型定位，相對于非靜態(tài)定位的父元素進行定位移動

代碼： position : absolute

特點：?

需要配合方位屬性實現(xiàn)移動默認相對于瀏覽器可視區(qū)域進行移動在頁面中不占位置 →?已經(jīng)脫標(biāo)

應(yīng)用場景：?

配合絕對定位組CP（子絕父相）

8.5.5.子絕父相

場景：讓子元素相對于父元素進行自由移動

含義：?

子元素：絕對定位父元素：相對定位

子絕父相好處：?

父元素是相對定位，則對網(wǎng)頁布局影響最小

8.5.6.固定定位

介紹：死心眼型定位，相對于瀏覽器進行定位移動

代碼：position : fixed;?

特點：?

需要配合方位屬性實現(xiàn)移動相對于瀏覽器可視區(qū)域進行移動在頁面中不占位置 →?已經(jīng)脫標(biāo)

應(yīng)用場景：?

讓盒子固定在屏幕中的某個位置

8.5.7.元素的層級關(guān)系

元素層級問題

不同布局方式元素的層級關(guān)系：?

標(biāo)準(zhǔn)流 < 浮動 < 定位

不同定位之間的層級關(guān)系：?

相對、絕對、固定默認層級相同此時HTML中寫在下面的元素層級更高，會覆蓋上面的元素

更改定位元素的層級

場景：改變定位元素的層級

屬性名：z-index?

屬性值：數(shù)字?

數(shù)字越大，層級越高

8.6.裝飾

8.6.1.垂直對齊方式

屬性名：vertical-align?

屬性值：

?

?

（拓展）項目中 vertical-align 可以解決的問題

文本框和表單按鈕無法對齊問題input和img無法對齊問題div中的文本框，文本框無法貼頂問題div不設(shè)高度由img標(biāo)簽撐開，此時img標(biāo)簽下面會存在額外間隙問題使用line-height讓img標(biāo)簽垂直居中問題

注意點：?

學(xué)習(xí)浮動之后，不推薦使用行內(nèi)塊元素讓div一行中顯示，因為可能會出現(xiàn)垂直對齊問題推薦優(yōu)先使用浮動完成效果

8.6.2.光標(biāo)類型

場景：設(shè)置鼠標(biāo)光標(biāo)在元素上時顯示的樣式

屬性名：cursor?

常見屬性值：

?

8.6.3.邊框圓角

場景：讓盒子四個角變得圓潤，增加頁面細節(jié)，提升用戶體驗

屬性名：border-radius?

常見取值：數(shù)字+px 、百分比?

原理：

?

?

賦值規(guī)則：從左上角開始賦值，然后順時針賦值，沒有賦值的看對角！

8.6.4.overflow溢出部分顯示

溢出部分：指的是盒子 內(nèi)容部分?所超出盒子范圍的區(qū)域

場景：控制內(nèi)容溢出部分的顯示效果，如：顯示、隱藏、滾動條……

屬性名：overflow?

常見屬性值：

?

8.6.5.元素本身隱藏

場景：讓某元素本身在屏幕中不可見。如：鼠標(biāo):hover之后元素隱藏

常見屬性： 1. visibility：hidden 2. display：none

區(qū)別：?

visibility：hidden?隱藏元素本身，并且在網(wǎng)頁中 占位置display：none?隱藏元素本身，并且在網(wǎng)頁中 不占位置

注意點：?

開發(fā)中經(jīng)常會通過 display屬性完成元素的顯示隱藏切換display：none；（隱藏）、 display：block；（顯示）

8.6.6.（拓展）元素整體透明度

場景：讓某元素整體（包括內(nèi)容）一起變透明

屬性名：opacity?

屬性值：0~1之間的數(shù)字?

1：表示完全不透明0：表示完全透明

注意點：?

opacity會讓元素整體透明，包括里面的內(nèi)容，如：文字、子元素等……

8.6.7.（拓展）邊框合并

場景：讓相鄰表格邊框進行合并，得到細線邊框效果

代碼：border-collapse：collapse；

8.6.8.（拓展）用CSS畫三角形技巧（面試題）

場景：在網(wǎng)頁中展示出小三角形時，除了可以使用圖片外，還可以使用代碼完成。

實現(xiàn)原理：?

利用盒子邊框完成

實現(xiàn)步驟：?

設(shè)置一個盒子設(shè)置四周不同顏色的邊框?qū)⒑凶訉捀咴O(shè)置為0，僅保留邊框得到四個三角形，選擇其中一個后，其他三角形（邊框）設(shè)置顏色為透明

8.7.選擇器拓展

目標(biāo)：能夠使用 偽類選擇器 選擇元素的不同狀態(tài)

8.7.1.鏈接偽類選擇器

場景：常用于選中超鏈接的不同狀態(tài)

選擇器語法：

?

注意點：?

如果需要同時實現(xiàn)以上四種偽類狀態(tài)效果，需要按照 LVHA?順序書寫 記憶口訣：男盆友送了你一個 LV?包包，你開心的 HA?哈笑其中 :hover偽類選擇器 使用更為頻繁，常用于選擇各類元素的懸停狀態(tài)

8.7.2.焦點偽類選擇器

場景：用于選中元素獲取焦點時狀態(tài)，常用于表單控件

選擇器語法：

?

?

效果：?

表單控件獲取焦點時默認會顯示外部輪廓線

8.7.3.屬性選擇器

場景：通過元素上的HTML屬性來選擇元素，常用于選擇 input?標(biāo)簽

選擇器語法：

?

9.網(wǎng)頁制作流程

9.1.根目錄

目標(biāo)：能根據(jù)項目需求創(chuàng)建根目錄

根目錄：網(wǎng)站的第一級文件夾

圖片文件夾: images?樣式文件夾: CSS?首頁 : index.html

?

9.2.布局流程

目標(biāo): 掌握網(wǎng)頁布局基本步驟

從外到內(nèi), 從上到下?CSS美化?

寬度,高度,背景色 →?調(diào)整位置放內(nèi)容 →?調(diào)整內(nèi)容位置 →?調(diào)整細節(jié)(文字樣式等等)

?

柚子快報激活碼778899分享：html CSS樣式

http://yzkb.51969.com/

相關(guān)鏈接