柚子快報(bào)激活碼778899分享：前端 css（超詳細(xì)知識(shí)點(diǎn)）

http://yzkb.51969.com/

CSS：層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。同時(shí)也能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

以上都是官方語(yǔ)句，通俗來(lái)講css是html的拓展，是網(wǎng)頁(yè)的進(jìn)一步美化。

本篇文章側(cè)重于對(duì)css相關(guān)知識(shí)點(diǎn)的串講以及和html的對(duì)比，我們上次已經(jīng)討論過(guò)html的用法，對(duì)這方面不了解的話，指路文章html詳解。

目錄

1.初識(shí)css

2.基礎(chǔ)選擇器

3.畫(huà)盒子——背景圖

4.字體修飾

?5.復(fù)合選擇器

1.后代選擇器——選中所有后代元素

2.子代選擇器——選中子代元素

4.交集選擇器——同時(shí)滿足多個(gè)條件的元素

5.偽類(lèi)選擇器——選中元素的某個(gè)狀態(tài)設(shè)置樣式

6.css特性

1.繼承性：子級(jí)繼承父級(jí)文字控制屬性

2.層疊性：相同的屬性后面覆蓋前面，不同的屬性疊加

3.優(yōu)先級(jí)：選擇器優(yōu)先級(jí)高的樣式生效

7.Emmet寫(xiě)法

8.背景屬性

1.拆分寫(xiě)法

2.復(fù)合寫(xiě)法

9.顯示模式

1.類(lèi)型

2.轉(zhuǎn)換顯示模式

10.結(jié)構(gòu)偽類(lèi)選擇器——根據(jù)元素結(jié)構(gòu)關(guān)系查找元素

11.偽元素選擇器——?jiǎng)?chuàng)造虛擬元素

12.盒子模型

13.標(biāo)準(zhǔn)流：默認(rèn)排列規(guī)則

14.浮動(dòng)（了解）——塊級(jí)水平排列

15.Fex——彈性布局

16.定位——靈活改變盒子在網(wǎng)頁(yè)的位置

17.css精靈（拓展）

1.初識(shí)css

（1）內(nèi)部樣式：在html當(dāng)中，我們最常編輯的區(qū)域是

（2）外部樣式：在css文件當(dāng)中存放css代碼，在html中用link引入，如下：

之后的講解更側(cè)重與內(nèi)部樣式，外部樣式了解即可。

2.基礎(chǔ)選擇器

上面的代碼中有提到選擇器書(shū)寫(xiě)的位置，接下來(lái)介紹有哪些選擇器

標(biāo)簽選擇器——選中同標(biāo)簽設(shè)置相同樣式類(lèi)選擇器——類(lèi)名；標(biāo)簽中加class=“類(lèi)名”id選擇器——#id；標(biāo)簽中加id=“id”通配符選擇器——默認(rèn)樣式

其中類(lèi)和id選擇器可以差異化設(shè)置標(biāo)簽樣式

標(biāo)簽選擇器

有以下情況出現(xiàn)

如果只添加通配符選擇器，也就是上述代碼注釋取消，將剩余css代碼注釋掉會(huì)有這樣的情況

3.畫(huà)盒子——背景圖

div{

height: 10px;

/* 盒子高度 */

width: 50px;

/* 盒子寬度 */

background-color:red;

/* 背景色 */

}

4.字體修飾

div{

height: 10px;

width: 50px;

background-color:red;

/* 字體大小 */

font-size: 50px;

/* 字體粗細(xì)(粗：700；細(xì)：400):400-700 */

font-weight: 600;

/* 是否傾斜（normal:正常；italic：傾斜） */

font-style: italic;

/* 文本對(duì)齊（center：居中；right：右對(duì)齊），默認(rèn)左對(duì)齊 */

text-align: center;

/* 顏色色值（rgb法，rgba法，十六進(jìn)制法，r：red，g：green；b：blue；a:透明度） */

color: #DDAABB;

/* color: rgb(40,21,46); */

/* color: rgba(45, 21, 41, 12); */

/* 行高（數(shù)+px；數(shù)——size的倍數(shù)）,垂直居中行高等于height值 */

line-height: 2;

/* 文字族——設(shè)置字體，瀏覽器依照順序和自身能夠使用字體進(jìn)行字體選擇 */

font-family: 'Courier New', Courier, monospace;

/* font屬性——設(shè)置公共樣式：傾斜，加粗，大小:30px，行高2倍，字體樣式 */

/* font: italic 400 30px/2; */

/* 文本縮進(jìn)（數(shù)+px；數(shù)+em） */

text-indent: 20px;

/* 圖片居中（圖片在div標(biāo)簽下）同文字居中 */

/* 文本修飾線 none：無(wú)；line-through：刪除線；underline：下劃線；overline：上劃線*/

text-decoration: line-through;

}

?5.復(fù)合選擇器

定義：有兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過(guò)不同方式組合（準(zhǔn)確高效的選擇）

1.后代選擇器——選中所有后代元素

父選擇器 子選擇器{css屬性}

2.子代選擇器——選中子代元素

父選擇器>子選擇器{css屬性}

3.并集選擇器——選中多組相同設(shè)置樣式的標(biāo)簽

選擇器1,選擇器2···選擇器n{css屬性}

4.交集選擇器——同時(shí)滿足多個(gè)條件的元素

選擇器1選擇器2{css屬性}

ps：交集選擇器中有標(biāo)簽選擇器，標(biāo)簽選擇器必須寫(xiě)在最前面

5.偽類(lèi)選擇器——選中元素的某個(gè)狀態(tài)設(shè)置樣式

鼠標(biāo)懸停狀態(tài)：選擇器：hover{css屬性}

ps：存在多個(gè)選擇器時(shí)，選擇其一即可。

拓展：

選擇器作用：link訪問(wèn)前：visited訪問(wèn)后：active點(diǎn)擊時(shí)（激活）

6.css特性

1.繼承性：子級(jí)繼承父級(jí)文字控制屬性

ps：子級(jí)擁有自己的樣式則不會(huì)繼承父級(jí)。

2.層疊性：相同的屬性后面覆蓋前面，不同的屬性疊加

3.優(yōu)先級(jí)：選擇器優(yōu)先級(jí)高的樣式生效

公式：通配符<標(biāo)簽<類(lèi)

疊加計(jì)算規(guī)則：存在復(fù)合選擇器時(shí)，從左向右依次比較個(gè)數(shù)，同一級(jí)個(gè)數(shù)多的優(yōu)先級(jí)高，如果個(gè)數(shù)相同，則向后比較；！important權(quán)重最高；繼承權(quán)重最低。

7.Emmet寫(xiě)法

html

css：大多數(shù)簡(jiǎn)寫(xiě)方式為屬性的首字母

8.背景屬性

1.拆分寫(xiě)法

背景圖——background-image（bgi）：url（路徑）背景圖平鋪方式——background-repeat（bgr）：屬性值

屬性值效果no-repeat不平鋪repeat平鋪（默認(rèn)）repeatx水平平鋪repeaty豎直平鋪

? ? ? 3.背景圖位置——background-position（bgp）：屬性值

關(guān)鍵字

關(guān)鍵字位置left左側(cè)right右側(cè)center居中top頂部bottom底部

坐標(biāo)（數(shù)字+px，正負(fù)都可）

水平：正數(shù)向右，負(fù)數(shù)向左

垂直：正數(shù)向下，負(fù)數(shù)向上

關(guān)鍵字或數(shù)字可以只寫(xiě)一個(gè)，另一個(gè)方向居中

? ? ?4.背景圖縮放——background-size（bgz）

關(guān)鍵字

cover：覆蓋背景區(qū)，可能背景圖片部分看不見(jiàn)

contain：裝入背景區(qū)，可能背景圖片部分空白

百分比數(shù)字+單位（eg：px）

? ? ?5.背景圖固定——background-attachment（bga）:fixed

2.復(fù)合寫(xiě)法

?背景圖復(fù)合屬性——background（bg）:屬性值（包括以上屬性值）

9.顯示模式

1.類(lèi)型

塊級(jí)元素

獨(dú)占一行寬度默認(rèn)是父級(jí)的100%添加寬高屬性生效行內(nèi)元素

尺寸由內(nèi)容決定添加寬高屬性不生效行內(nèi)塊元素

尺寸由內(nèi)容決定添加寬高屬性生效

2.轉(zhuǎn)換顯示模式

屬性名：display

屬性值：

屬性值效果block塊級(jí)inline-block行內(nèi)級(jí)

10.結(jié)構(gòu)偽類(lèi)選擇器——根據(jù)元素結(jié)構(gòu)關(guān)系查找元素

選擇器說(shuō)明 E:first-child 查找第一個(gè)E元素E:last-child查找最后一個(gè)E元素E:nth-child(N)查找第N個(gè)E元素

ps：N可以是數(shù)學(xué)公式

功能公式偶數(shù)2n奇數(shù)2n+5的倍數(shù)5n第5個(gè)以后n+5第5個(gè)以前-n+5

11.偽元素選擇器——?jiǎng)?chuàng)造虛擬元素

選擇器說(shuō)明E::before在E元素里面最前面添加一個(gè)元素E::after在E元素里面最后面添加一個(gè)元素

ps:

必須設(shè)置content:" "屬性來(lái)設(shè)置內(nèi)容偽元素默認(rèn)是行內(nèi)顯示模式權(quán)重和標(biāo)簽選擇器相同

12.盒子模型

1.內(nèi)邊距

屬性：padding（四個(gè)方向內(nèi)邊距相等）/padding-方位名詞（距離某一方向內(nèi)邊距）

多值寫(xiě)法：

2.邊框線

屬性：border

屬性值：solid（實(shí)線），dashed（虛線），dotted（點(diǎn)線）

ps：border+方位名詞（設(shè)置單方向邊框線）

3.外邊距

屬性：margin（同padding）

合并現(xiàn)象：垂直排列的兄弟元素，上下margin合并（取最大值）

塌陷問(wèn)題：父子級(jí)的標(biāo)簽，子級(jí)的添加使上外邊距產(chǎn)生塌陷（導(dǎo)致父級(jí)一起向下運(yùn)動(dòng)）解決方法如下：

取消子級(jí)margin，父級(jí)設(shè)置padding；父級(jí)設(shè)置overflow：hidden；父級(jí)設(shè)置border-top

4.尺寸計(jì)算

盒子尺寸=內(nèi)容尺寸+border尺寸+內(nèi)邊距尺寸

防止盒子撐大方法

手動(dòng)減法border/padding的尺寸內(nèi)減模式：box-sizing：border-box

5.清除默認(rèn)樣式

*{

? ? margin:0;

? ? padding:0;

}

去掉項(xiàng)目列表符號(hào)：list-style:none

6.元素溢出——控制溢出元素內(nèi)容

屬性名：overflow

屬性值：

屬性值效果hidden溢出隱藏scroll溢出滾動(dòng)（無(wú)論是否溢出，均顯示滾動(dòng)條位置）auto溢出滾動(dòng)（溢出才顯示滾動(dòng)條位置）

7.行內(nèi)元素——添加內(nèi)外邊距無(wú)法改變垂直位置

行內(nèi)元素添加line-height

8.圓角——設(shè)置外邊框?yàn)閳A角

屬性名:border-radius

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

ps:屬性值是圓角半徑

取值個(gè)數(shù)示例含義1border-radius:10px;四個(gè)圓角半徑均為10px2border-radius:10px 80px;上左+下右:10px;上右+下左:80px;3border-radius:10px 40px 80px;上左:10px;上右+下左:40px;下右:80pX4border-radius:10px 20px 40px 0x; 上左:10px;上右:20px;下右:40px;下左:80pX

常見(jiàn)應(yīng)用-正圓形狀。

給正方形盒子設(shè)置圓角屬性值為 寬高的一半/50%常見(jiàn)應(yīng)用 -膠囊形狀

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

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

屬性名:box-shadow

屬性值:x軸偏移量 γ軸偏移量 糊半徑 擴(kuò)散半徑 顏色 內(nèi)外陰影

ps:

X軸偏移量 和Y軸偏移量 必須書(shū)寫(xiě).默認(rèn)是外陰影，內(nèi)陰影需要添加 inset

13.標(biāo)準(zhǔn)流：默認(rèn)排列規(guī)則

14.浮動(dòng)（了解）——塊級(jí)水平排列

float：屬性值

屬性值效果left左對(duì)齊right右對(duì)齊

浮動(dòng)影響：浮動(dòng)的盒子會(huì)脫標(biāo)，當(dāng)父級(jí)無(wú)高度時(shí)，子級(jí)無(wú)法撐開(kāi)。

如何清除浮動(dòng)影響？

1.額外清除法

.clearfix{

clear:both;

}

2.單偽元素法（在父級(jí)添加塊級(jí)元素）

.clearfix::after{

content:"";

display:block;

clear:both;

}

3.雙偽元素法

.clearfix::after,

.clearfix::after{

content:"";

display:table;

}

.clearfix::after{

clear:both;

}

4.overflow（父級(jí)+css屬性）

overflow：hidden

15.Flex——彈性布局

設(shè)置方式：父級(jí)元素設(shè)置display：flex，子元素自動(dòng)擠壓或拉伸

默認(rèn)主軸為水平方向，側(cè)軸為垂直方向

主軸對(duì)齊方式

屬性名：justify-content

屬性值效果flex-start默認(rèn)值，彈性盒子從起點(diǎn)開(kāi)始依次排列flex-end彈性盒子從終點(diǎn)開(kāi)始依次排列center彈性盒子沿主軸居中排列space-between彈性盒子沿主軸均勻排列，空白間距均分在彈性盒子之間space-around彈性盒子沿主軸均勻排列，空白間距均分在彈性盒子兩側(cè)space-evenly 彈性盒子沿主軸均勻排列，彈性盒子與容器之間間距相等

側(cè)軸對(duì)齊方式

屬性名

align-items：當(dāng)前彈性容器內(nèi)所有彈性盒子的側(cè)軸對(duì)齊方式(給彈性容器設(shè)置)align-self:單獨(dú)控制某個(gè)彈性盒子的側(cè)軸對(duì)齊方式(給彈性盒子設(shè)置)

屬性值效果stretch彈性盒子沿著側(cè)軸線被拉伸至鋪滿容器(彈性盒子沒(méi)有設(shè)置側(cè)軸方向尺寸則默認(rèn)拉伸)center彈性盒子沿側(cè)軸居中排列flex-start彈性盒子從起點(diǎn)開(kāi)始依次排列flex-end彈性盒子從終點(diǎn)開(kāi)始依次排列

修改主軸方向 屬性名:flex-direction

屬性值效果row水平方向，從左向右(默認(rèn))column垂直方向，從上向下row-reverse水平方向，從右向左column-reverse垂直方向，從下向上

彈性伸縮比——控制彈性盒子的主軸方向的尺寸。 屬性名:flex 屬性值:整數(shù)數(shù)字，表示占用父級(jí)剩余尺寸的份數(shù)

彈性盒子換行 原因：彈性盒子可以自動(dòng)擠壓或拉伸，默認(rèn)情況下，所有彈性盒子都在一行顯示。 屬性名:flex-wrap 屬性值 ·wrap:換行 ·nowrap:不換行(默認(rèn))

16.定位——靈活改變盒子在網(wǎng)頁(yè)的位置

（1）屬性名：position

定位模式屬性值是否脫標(biāo)顯示模式參照物相對(duì)定位relative否保持標(biāo)簽原有顯示模式自己原來(lái)位置絕對(duì)定位（子絕父相）absolute是行內(nèi)塊特點(diǎn)1.已經(jīng)定位的祖先元素 2.瀏覽器可視區(qū)固定定位fixed是行內(nèi)塊特點(diǎn)瀏覽器窗口

（2）邊偏移:設(shè)置盒子的位置

leftrighttopbottom

（3）定位劇中

步驟：

絕對(duì)定位水平、垂直邊偏移為 50%子級(jí)向左、上移動(dòng)自身尺寸的一半

img{

position: absolute;

left: 50%;

margin-left: -14px;

margin-top: 50px;

}

左、上的外邊距為 -尺寸的一半transform:translate(-50%,-50%)

img{

position: absolute;

left: 50%;

/* margin-left: -14px;

margin-top: 50px; */

transform:translate(-50%,-50%)

}

（4）堆疊層級(jí) z-ingex——設(shè)置定位元素的層級(jí)順序，改變定位元素的顯示順序

? ? ? ? /* div為父級(jí)，box1和box2為子級(jí) */

? ? ? ? div{

? ? ? ? ? ? height: 50px;

? ? ? ? ? ? width: 50px;

? ? ? ? }

? ? ? ? .box1{

? ? ? ? ? ? background-color: royalblue;

? ? ? ? }

? ? ? ? .box2{

? ? ? ? ? ? background-color: pink;

? ? ? ? }

加入定位默認(rèn)效果:按照標(biāo)簽書(shū)寫(xiě)順序，后來(lái)者居上

/* div為父級(jí)，box1和box2為子級(jí) */

div{

position: absolute;

height: 50px;

width: 50px;

}

.box1{

background-color: royalblue;

}

.box2{

background-color: pink;

}

設(shè)置邊偏移改變位置

設(shè)置堆疊層級(jí) z-ingex改變堆疊關(guān)系（值大的在上方）

17.css精靈（拓展）

CSS 精靈，也叫 CSS Sprites，是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再background-position 精確的定位出背景圖片的位置。

優(yōu)點(diǎn):減少服務(wù)器被請(qǐng)求次數(shù)減輕服務(wù)器的壓力，提高頁(yè)面加載速度

步驟: 1.創(chuàng)建盒子，盒子尺寸與小圖尺寸相同 2.設(shè)置盒子背景圖為精靈圖 3.添加 background-position 屬性，改變背景圖位置 3.1 測(cè)量小圖片左上角坐標(biāo) 3.2 職負(fù)數(shù)坣標(biāo)為 background-position 屬性值(向左上移動(dòng)圖片位置)

此篇文章到此結(jié)束,大家自己也試著找個(gè)網(wǎng)頁(yè)練練手吧！代碼無(wú)情，人間有情，歡迎大家點(diǎn)贊評(píng)論加收藏。內(nèi)容如有問(wèn)題還請(qǐng)大家在評(píng)論區(qū)指點(diǎn)一二。

柚子快報(bào)激活碼778899分享：前端 css（超詳細(xì)知識(shí)點(diǎn)）

http://yzkb.51969.com/

參考文章