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

http://yzkb.51969.com/

目錄

1.基礎(chǔ)選擇器

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

1.2.類(lèi)選擇器

1.3.id選擇器

1.4.通配符選擇器

2.字體和文本樣式

2.1.字體樣式

2.1.1.字體大小

2.1.2.字體粗細(xì)

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

2.1.4.常見(jiàn)字體系列（了解）

2.1.5.字體系列font-family

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

2.2.文本樣式

2.2.1.文本縮進(jìn)

2.2.2.文本水平對(duì)齊方式

2.2.3.文本修飾

2.3.line-height行高

3.選擇器進(jìn)階

3.1.復(fù)合選擇器

3.1.1.后代選擇器：空格

3.1.2.子代選擇器：>

3.2.并集選擇器

3.3.交集選擇器

3.4.hover偽類(lèi)選擇器

3.5.Emmet語(yǔ)法

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

4.1.背景顏色

4.2.背景圖片

4.3.背景平鋪

4.4.背景位置

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

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

5.元素顯示模式

5.1.塊級(jí)元素

5.2.行內(nèi)元素

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

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

5.5.拓展

6.CSS特性

6.1.繼承性

6.2.層疊性

6.3.優(yōu)先級(jí)

7.盒子模型

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

7.2.邊框（border）?

7.2.1.邊框（border）- 單個(gè)屬性

7.2.2.邊框（border）- 連寫(xiě)形式

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

7.2.4.盒子實(shí)際大小初級(jí)計(jì)算公式

7.2.5盒子實(shí)際大小初級(jí)計(jì)算公式：

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

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

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

7.3.3.盒子實(shí)際大小終極計(jì)算公式

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

7.4.外邊距（margin）

7.4.1.外邊距（margin）- 取值

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

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

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

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

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

8.CSS布局

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

8.2.偽元素

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

8.4.浮動(dòng)

8.4.1.浮動(dòng)的代碼

8.4.2.浮動(dòng)的特點(diǎn)

8.4.3.清除浮動(dòng)

8.5.定位

8.5.1.定位的基本使用步驟

8.5.2.靜態(tài)定位

8.5.3.相對(duì)定位

8.5.4.絕對(duì)定位

8.5.5.子絕父相

8.5.6.固定定位

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

8.6.裝飾

8.6.1.垂直對(duì)齊方式

8.6.2.光標(biāo)類(lèi)型

8.6.3.邊框圓角

8.6.4.overflow溢出部分顯示

8.6.5.元素本身隱藏

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

8.6.7.（拓展）邊框合并

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

8.7.選擇器拓展

8.7.1.鏈接偽類(lèi)選擇器

8.7.2.焦點(diǎn)偽類(lèi)選擇器

8.7.3.屬性選擇器

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

9.1.根目錄

9.2.布局流程

?

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

1.基礎(chǔ)選擇器

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

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

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

注意點(diǎn)：?

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

1.2.類(lèi)選擇器

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

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

注意點(diǎn)：?

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

1.3.id選擇器

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

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

注意點(diǎn)：

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

補(bǔ)充：類(lèi)與id的區(qū)別

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

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

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

類(lèi)選擇器以 .?開(kāi)頭id選擇器以 #?開(kāi)頭

實(shí)際開(kāi)發(fā)的情況?

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

1.4.通配符選擇器

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

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

注意點(diǎn)：?

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

2.字體和文本樣式

2.1.字體樣式

2.1.1.字體大小

屬性名：font-size

取值：數(shù)字+px

注意點(diǎn)：

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

2.1.2.字體粗細(xì)

屬性名：font-weight

取值：

關(guān)鍵字

正常?normal

加粗?bold

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

正常 400

加粗 700

注意點(diǎn)：

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

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

屬性名：font-style

取值：

正常（默認(rèn)值）：normal

傾斜：italic

2.1.4.常見(jiàn)字體系列（了解）

無(wú)襯線(xiàn)字體（sans-serif）?

特點(diǎn)：文字筆畫(huà)粗細(xì)均勻，并且首尾無(wú)裝飾場(chǎng)景：網(wǎng)頁(yè)中大多采用無(wú)襯線(xiàn)字體常見(jiàn)該系列字體：黑體、Arial

襯線(xiàn)字體（serif）?

特點(diǎn)：文字筆畫(huà)粗細(xì)不均，并且首尾有筆鋒裝飾場(chǎng)景：報(bào)刊書(shū)籍中應(yīng)用廣泛常見(jiàn)該系列字體：宋體、Times New Roman

等寬字體（monospace）?

特點(diǎn)：每個(gè)字母或文字的寬度相等場(chǎng)景：一般用于程序代碼編寫(xiě)，有利于代碼的閱讀和編寫(xiě)常見(jiàn)該系列字體：Consolas、fira code

2.1.5.字體系列font-family

屬性名：font-family?

常見(jiàn)取值：具體字體1,具體字體2,具體字體3,具體字體4,...,字體系列?

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

渲染規(guī)則：?

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

注意點(diǎn)：?

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

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

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

取值：?

font : style weight size family;?

省略要求：?

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

注意點(diǎn)：如果需要同時(shí)設(shè)置單獨(dú)和連寫(xiě)形式

要么把單獨(dú)的樣式寫(xiě)在連寫(xiě)的下面要么把單獨(dú)的樣式寫(xiě)在連寫(xiě)的里面

2.2.文本樣式

2.2.1.文本縮進(jìn)

屬性名：text-indent?

取值：?

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

2.2.2.文本水平對(duì)齊方式

屬性名：text-align

取值：

?

?

注意點(diǎn)：

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

2.2.3.文本修飾

屬性名：text-decoration

取值：

?

?

注意點(diǎn)：

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

2.3.line-height行高

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

屬性名：line-height?

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

應(yīng)用：?

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

行高與font連寫(xiě)的注意點(diǎn)：?

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

拓展 顏色常見(jiàn)取值（了解）

屬性名：?

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

屬性值：

?

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

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

注意點(diǎn)：

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

3.選擇器進(jìn)階

3.1.復(fù)合選擇器

3.1.1.后代選擇器：空格

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

選擇器語(yǔ)法：選擇器1 選擇器2 { css }?

結(jié)果：?

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

注意點(diǎn)：?

后代包括：兒子、孫子、重孫子……后代選擇器中，選擇器與選擇器之前通過(guò) 空格 隔開(kāi)

3.1.2.子代選擇器：>

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

選擇器語(yǔ)法：選擇器1 > 選擇器2 { css }?

結(jié)果：?

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

注意點(diǎn)：

子代只包括：兒子子代選擇器中，選擇器與選擇器之前通過(guò) >?隔開(kāi)

3.2.并集選擇器

并集選擇器：,

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

選擇器語(yǔ)法：選擇器1 ， 選擇器2 { css }?

結(jié)果：?

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

注意點(diǎn)：?

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

3.3.交集選擇器

交集選擇器：緊挨著

作用：選中頁(yè)面中 同時(shí)滿(mǎn)足?多個(gè)選擇器的標(biāo)簽

選擇器語(yǔ)法：選擇器1選擇器2 { css }?

結(jié)果：?

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

注意點(diǎn)：?

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

3.4.hover偽類(lèi)選擇器

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

選擇器語(yǔ)法：選擇器:hover { css }?

注意點(diǎn)：?

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

3.5.Emmet語(yǔ)法

作用：通過(guò)簡(jiǎn)寫(xiě)語(yǔ)法，快速生成代碼

語(yǔ)法：?

類(lèi)似于剛剛學(xué)習(xí)的選擇器的寫(xiě)法

?

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

4.1.背景顏色

屬性名：background-color（bgc）?

屬性值：?

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

注意點(diǎn)：?

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

4.2.背景圖片

屬性名：background-image（bgi）?

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

注意點(diǎn)：?

背景圖片中url中可以省略引號(hào)背景圖片默認(rèn)是在水平和垂直方向平鋪的背景圖片僅僅是指給盒子起到裝飾效果，類(lèi)似于背景顏色，是不能撐開(kāi)盒子的

4.3.背景平鋪

屬性名：background-repeat（bgr）

屬性值：

?

?

4.4.背景位置

屬性名：background-position（bgp）

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

?

?

注意點(diǎn)：

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

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

屬性名：background（bg）?

屬性值：?

單個(gè)屬性值的合寫(xiě)，取值之間以空格隔開(kāi)

書(shū)寫(xiě)順序：?

推薦：background：color image repeat position?

省略問(wèn)題：?

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

注意點(diǎn)?

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

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

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

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

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

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

需要設(shè)置div的寬高，因?yàn)楸尘皥D片只是裝飾的CSS樣式，不能撐開(kāi)div標(biāo)簽

5.元素顯示模式

5.1.塊級(jí)元素

顯示特點(diǎn)：?

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

代表標(biāo)簽：?

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

5.2.行內(nèi)元素

顯示特點(diǎn)：?

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

代表標(biāo)簽：?

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

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

顯示特點(diǎn)：?

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

代表標(biāo)簽：?

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

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

目的：改變?cè)啬J(rèn)的顯示特點(diǎn)，讓元素符合布局要求

語(yǔ)法：

?

5.5.拓展

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

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

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

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

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

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

?

6.CSS特性

6.1.繼承性

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

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

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

注意點(diǎn)：?

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

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

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

常見(jiàn)應(yīng)用場(chǎng)景：?

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

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

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

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

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

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

6.2.層疊性

特性：?

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

注意點(diǎn)：?

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

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

6.3.優(yōu)先級(jí)

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

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

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

注意點(diǎn)：?

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

權(quán)重疊加計(jì)算

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

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

?

比較規(guī)則：?

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

注意點(diǎn)：

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

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

?

7.盒子模型

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

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

屬性：width / height?

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

?

7.2.邊框（border）?

7.2.1.邊框（border）- 單個(gè)屬性

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

單個(gè)屬性：

?

7.2.2.邊框（border）- 連寫(xiě)形式

屬性名：border

屬性值：?jiǎn)蝹€(gè)取值的連寫(xiě)，取值之間以空格隔開(kāi)

如：border : 10px solid red;

快捷鍵：bd + tab

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

場(chǎng)景：只給盒子的某個(gè)方向單獨(dú)設(shè)置邊框

屬性名：border - 方位名詞

屬性值：連寫(xiě)的取值

7.2.4.盒子實(shí)際大小初級(jí)計(jì)算公式

需求：盒子尺寸 400*400，背景綠色，邊框10px?實(shí)線(xiàn) 黑色，如何完成？

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

7.2.5盒子實(shí)際大小初級(jí)計(jì)算公式：

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

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

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

?

?

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

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

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

屬性名：padding?

常見(jiàn)取值：

?

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

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

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

屬性名：padding - 方位名詞?

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

7.3.3.盒子實(shí)際大小終極計(jì)算公式

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

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

盒子實(shí)際大小終極計(jì)算公式：?

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

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

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

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

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

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

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

操作：自己計(jì)算多余大小，手動(dòng)在內(nèi)容中減去缺點(diǎn)：項(xiàng)目中計(jì)算量太大，很麻煩

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

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

7.4.外邊距（margin）

7.4.1.外邊距（margin）- 取值

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

屬性名：margin?

常見(jiàn)取值：

?

?

記憶規(guī)則：從上開(kāi)始賦值，然后順時(shí)針賦值，如果設(shè)置賦值的，看對(duì)面的?。?/p>

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

場(chǎng)景：只給盒子的某個(gè)方向單獨(dú)設(shè)置外邊距

屬性名：margin - 方位名詞?

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

應(yīng)用：

?

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

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

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

解決方法：

?

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

場(chǎng)景：垂直布局 的 塊級(jí)元素，上下的margin會(huì)合并

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

解決方法：避免就好

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

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

場(chǎng)景：?互相嵌套?的 塊級(jí)元素，子元素的 margin-top?會(huì)作用在父元素上

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

解決方法：?

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

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

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

結(jié)果：?

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

8.CSS布局

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

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

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

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

選擇器：

?

注意點(diǎn)：

?

n的注意點(diǎn)：?

n為：0、1、2、3、4、5、6、……通過(guò)n可以組成常見(jiàn)公式

?

?

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

選擇器：?

?

區(qū)別：?

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

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

8.2.偽元素

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

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

區(qū)別：?

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

種類(lèi)：

?

注意點(diǎn)：?

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

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

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

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

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

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

8.4.浮動(dòng)

8.4.1.浮動(dòng)的代碼

屬性名：float

屬性值：

?

?

8.4.2.浮動(dòng)的特點(diǎn)

浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流（簡(jiǎn)稱(chēng)：脫標(biāo)），在標(biāo)準(zhǔn)流中不占位置

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

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

注意點(diǎn)：?

浮動(dòng)的元素不能通過(guò)text-align:center或者margin:0 auto

書(shū)寫(xiě)網(wǎng)頁(yè)導(dǎo)航步驟：

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

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

8.4.3.清除浮動(dòng)

目標(biāo)：能夠認(rèn)識(shí) 清除浮動(dòng)的目的，并且能夠使用 清除浮動(dòng)的方法

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

特點(diǎn)：?

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

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

操作：

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

特點(diǎn)：

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

8.4.3.3.清除浮動(dòng)的方法 — ③?單偽元素清除法

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

?基本寫(xiě)法 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 補(bǔ)充寫(xiě)法

?

特點(diǎn)：?

優(yōu)點(diǎn)：項(xiàng)目中使用，直接給標(biāo)簽加類(lèi)即可清除浮動(dòng)

8.4.3.4.清除浮動(dòng)的方法 — ④?雙偽元素清除法

操作：?

?

?

特點(diǎn)：?

優(yōu)點(diǎn)：項(xiàng)目中使用，直接給標(biāo)簽加類(lèi)即可清除浮動(dòng)

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

操作：?

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

特點(diǎn)：?

優(yōu)點(diǎn)：方便

（拓展補(bǔ)充）BFC的介紹

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

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

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

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

BFC盒子常見(jiàn)特點(diǎn)：?

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

8.5.定位

8.5.1.定位的基本使用步驟

設(shè)置定位方式?

屬性名：position?常見(jiàn)屬性值：

?

?

設(shè)置偏移值

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

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

?

8.5.2.靜態(tài)定位

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

代碼： position : static

注意點(diǎn)：?

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

8.5.3.相對(duì)定位

介紹：自戀型定位，相對(duì)于自己之前的位置進(jìn)行移動(dòng)

代碼： position : relative;

特點(diǎn)：?

需要配合方位屬性實(shí)現(xiàn)移動(dòng)相對(duì)于自己原來(lái)位置進(jìn)行移動(dòng)在頁(yè)面中占位置 →?沒(méi)有脫標(biāo)

應(yīng)用場(chǎng)景：?

配合絕對(duì)定位組CP（子絕父相）?用于小范圍的移動(dòng)

8.5.4.絕對(duì)定位

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

代碼： position : absolute

特點(diǎn)：?

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

應(yīng)用場(chǎng)景：?

配合絕對(duì)定位組CP（子絕父相）

8.5.5.子絕父相

場(chǎng)景：讓子元素相對(duì)于父元素進(jìn)行自由移動(dòng)

含義：?

子元素：絕對(duì)定位父元素：相對(duì)定位

子絕父相好處：?

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

8.5.6.固定定位

介紹：死心眼型定位，相對(duì)于瀏覽器進(jìn)行定位移動(dòng)

代碼：position : fixed;?

特點(diǎn)：?

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

應(yīng)用場(chǎng)景：?

讓盒子固定在屏幕中的某個(gè)位置

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

元素層級(jí)問(wèn)題

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

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

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

相對(duì)、絕對(duì)、固定默認(rèn)層級(jí)相同此時(shí)HTML中寫(xiě)在下面的元素層級(jí)更高，會(huì)覆蓋上面的元素

更改定位元素的層級(jí)

場(chǎng)景：改變定位元素的層級(jí)

屬性名：z-index?

屬性值：數(shù)字?

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

8.6.裝飾

8.6.1.垂直對(duì)齊方式

屬性名：vertical-align?

屬性值：

?

?

（拓展）項(xiàng)目中 vertical-align 可以解決的問(wèn)題

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

注意點(diǎn)：?

學(xué)習(xí)浮動(dòng)之后，不推薦使用行內(nèi)塊元素讓div一行中顯示，因?yàn)榭赡軙?huì)出現(xiàn)垂直對(duì)齊問(wèn)題推薦優(yōu)先使用浮動(dòng)完成效果

8.6.2.光標(biāo)類(lèi)型

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

屬性名：cursor?

常見(jiàn)屬性值：

?

8.6.3.邊框圓角

場(chǎng)景：讓盒子四個(gè)角變得圓潤(rùn)，增加頁(yè)面細(xì)節(jié)，提升用戶(hù)體驗(yàn)

屬性名：border-radius?

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

原理：

?

?

賦值規(guī)則：從左上角開(kāi)始賦值，然后順時(shí)針賦值，沒(méi)有賦值的看對(duì)角！

8.6.4.overflow溢出部分顯示

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

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

屬性名：overflow?

常見(jiàn)屬性值：

?

8.6.5.元素本身隱藏

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

常見(jiàn)屬性： 1. visibility：hidden 2. display：none

區(qū)別：?

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

注意點(diǎn)：?

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

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

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

屬性名：opacity?

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

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

注意點(diǎn)：?

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

8.6.7.（拓展）邊框合并

場(chǎng)景：讓相鄰表格邊框進(jìn)行合并，得到細(xì)線(xiàn)邊框效果

代碼：border-collapse：collapse；

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

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

實(shí)現(xiàn)原理：?

利用盒子邊框完成

實(shí)現(xiàn)步驟：?

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

8.7.選擇器拓展

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

8.7.1.鏈接偽類(lèi)選擇器

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

選擇器語(yǔ)法：

?

注意點(diǎn)：?

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

8.7.2.焦點(diǎn)偽類(lèi)選擇器

場(chǎng)景：用于選中元素獲取焦點(diǎn)時(shí)狀態(tài)，常用于表單控件

選擇器語(yǔ)法：

?

?

效果：?

表單控件獲取焦點(diǎn)時(shí)默認(rèn)會(huì)顯示外部輪廓線(xiàn)

8.7.3.屬性選擇器

場(chǎng)景：通過(guò)元素上的HTML屬性來(lái)選擇元素，常用于選擇 input?標(biāo)簽

選擇器語(yǔ)法：

?

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

9.1.根目錄

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

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

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

?

9.2.布局流程

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

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

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

?

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

http://yzkb.51969.com/

相關(guān)鏈接