前言

• 最近面試，發(fā)現(xiàn)CSS層疊樣式表很多細(xì)節(jié)已經(jīng)忘得差不多了。
• 寫(xiě)樣式，畫(huà)界面是一個(gè)前端工程師最基礎(chǔ)的素養(yǎng)。

一、基礎(chǔ)選擇器

標(biāo)簽： 標(biāo)簽名 { css屬性名：屬性值； }

類： .類名 { css屬性名：屬性值； }

id： #id屬性值 { css屬性名：屬性值； }

通配符： *{ css屬性名：屬性值； }

二、選擇器進(jìn)階

復(fù)合選擇器（后代、子代）、并集選擇器、交集選擇器、hover偽類選擇器

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

三、字體和樣式a

字體樣式：大?。?code>font-size 粗細(xì)：font-weight 樣式：font-style:italic 類型：font-family 類型：font屬性連寫(xiě)

文本樣式：

• 縮進(jìn)：text-indent：2px
• 水平對(duì)齊方式（文本、span、a、input、img的父元素）：text-align
• 修飾：text-decoration：underline下劃線/none清除裝飾

行高：line-height：父元素高度 line-height : 1可以取消上下間距

四、背景bgc

背景色background-color、背景圖background-image、背景平鋪background-repeat：no-repeat、背景位置background-position 背景圖大小background-size：cover/contain

連寫(xiě)：background：color image repeat position

展示圖片的兩種方法：

• 直接寫(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)簽

五、元素顯示模式display

塊級(jí)元素：

• 獨(dú)占一行、內(nèi)容決定高度、繼承父寬、可設(shè)置寬高
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

行內(nèi)元素：

• 一行顯示多個(gè)、內(nèi)容決定寬高、不可以設(shè)置寬高
• a、span 、b、u、i、s、strong、ins、em、del……

行內(nèi)塊元素：

• 一行可以顯示多個(gè)、可設(shè)置寬高
• input、textarea、img、button、select……

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

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

拓展2：居中方法總結(jié)

六、CSS 特性

繼承性

繼承性的特性是什么？

• 子元素有默認(rèn)繼承父元素樣式的特點(diǎn)

有哪些常見(jiàn)屬性可以繼承？

1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height

常見(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)文字大小

層疊性

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

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

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

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

注意：!important不能提升繼承的優(yōu)先級(jí)

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

七、盒子模型

• CSS 中規(guī)定每個(gè)盒子分別由：內(nèi)容區(qū)域（content）、內(nèi)邊距區(qū)域（padding）、邊框區(qū)域（border）、外邊距區(qū)域（margin）構(gòu)成，這就是 盒子模型

  • 標(biāo)準(zhǔn)(W3C)盒子模型：內(nèi)容content+填充padding+邊框border+邊界margin
  • 低版本IE盒子模型：內(nèi)容（content+padding+border）+ 邊界margin

• box-sizing中比較常用的兩個(gè)屬性值為 content-box和 border-box，它可以改變盒子模型的解析計(jì)算模式。

  • 當(dāng)設(shè)置box-sizing:content-box時(shí)，采用標(biāo)準(zhǔn)模式進(jìn)行計(jì)算，默認(rèn)就是這種模式width=content；

  • 當(dāng)設(shè)置box-sizing:border-box時(shí)，采用怪異模式進(jìn)行計(jì)算width=content+padding+border；

給margin和padding加屬性順序是上右下左

八、偽元素

元素：HTML 設(shè)置的標(biāo)簽

偽元素：由 CSS 模擬出的標(biāo)簽效果

注意點(diǎn)：

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

九、浮動(dòng)

標(biāo)準(zhǔn)流：又稱文檔流，是瀏覽器在渲染顯示網(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)折行

浮動(dòng)的作用是什么？

• 早期作用：圖文環(huán)繞
• 現(xiàn)在作用：用于布局，讓垂直布局的盒子變成水平布局，如：一個(gè)在左，一個(gè)在右

左浮動(dòng)的屬性是？右浮動(dòng)的屬性是？

• 左浮動(dòng)：float : left
• 右浮動(dòng)：float : right

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

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

• 相當(dāng)于從地面飄到了空中

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

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

注意點(diǎn)：
浮動(dòng)的元素不能通過(guò)text-align:center或者margin:0 auto

浮動(dòng)元素的特點(diǎn)有哪些？

• 浮動(dòng)元素會(huì)脫標(biāo)，在標(biāo)準(zhǔn)流中不占位置
• 浮動(dòng)元素比標(biāo)準(zhǔn)流高出半個(gè)級(jí)別，可以覆蓋標(biāo)準(zhǔn)流中的元素，可以清除浮動(dòng)
• 浮動(dòng)找浮動(dòng)，下一個(gè)浮動(dòng)元素會(huì)在上一個(gè)浮動(dòng)元素后面左右浮動(dòng)
• 浮動(dòng)元素有特殊的顯示效果：① 一行可以顯示多個(gè) ② 可以設(shè)置寬高

十、定位

網(wǎng)頁(yè)常見(jiàn)布局方式

標(biāo)準(zhǔn)流：塊級(jí)元素獨(dú)占一行 → 垂直布局、行內(nèi)元素/行內(nèi)塊元素一行顯示多個(gè) → 水平布局

浮動(dòng)：可以讓原本垂直布局的 塊級(jí)元素變成水平布局

定位：可以讓元素自由的擺放在網(wǎng)頁(yè)的任意位置、 一般用于 盒子之間的層疊情況

• 靜態(tài)定位static、相對(duì)定位（不脫標(biāo)）relative、絕對(duì)定位（脫標(biāo)）absolute、固定定位（脫標(biāo)）fixed

子絕父相

子絕父相的含義是什么？

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

子絕父相的應(yīng)用場(chǎng)景是什么？

• 讓子元素相對(duì)于父元素進(jìn)行自由移動(dòng)

子絕父相的好處是什么？

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

在使用子絕父相的時(shí)候，發(fā)現(xiàn)父元素已經(jīng)有絕對(duì)定位了，此時(shí)直接子絕即可！

十一、樣式補(bǔ)充

精靈圖

精靈圖的優(yōu)點(diǎn)：減少服務(wù)器發(fā)送次數(shù)，減輕服務(wù)器的壓力，提高頁(yè)面加載速度

使用精靈圖的步驟是什么？

1. 創(chuàng)建一個(gè)盒子
2. 設(shè)置盒子大小為小圖片大小
3. 設(shè)置精靈圖為盒子的背景圖片
4. 將小圖片左上角坐標(biāo) 取負(fù)值，設(shè)置給盒子的background-position：x y

文字陰影

屬性text-shadow：

參數(shù)	作用
h-shadow	必須，水平偏移量。允許負(fù)值
v-shadow	必須，垂直偏移量。允許負(fù)值
blur	可選，模糊度
color	可選，陰影顏色

盒子陰影

屬性box-shadow：

參數(shù)	作用
h-shadow	必須，水平偏移量。允許負(fù)值
v-shadow	必須，垂直偏移量。允許負(fù)值
blur	可選，模糊度
color	可選，陰影顏色
spread	可選，陰影擴(kuò)大
inset	可選，將陰影改為內(nèi)部陰影

過(guò)渡

面試題

1. 讓一個(gè)盒子居中常用方法：

• margin固定寬高居中
• 子絕父相，上下左右0，margin：auto
• 子絕父相，left：50%，top50%，margin-left:-50%盒子寬度，margin-top：-50%盒子高度
• 子絕父相，transform居中，left: 50%，top: 50%，transform: translate(-50%,-50%);
• 子絕父相對(duì)，left: 25%，right: 25%，top: 25%，bottom: 25%，margin:auto;
• flex布局，justify-content: center，align-items: center;

2.清除浮動(dòng)的方法（最常用的4種）

• 給父盒子添加高度（不推薦）
• 父級(jí)添加overflow屬性（父元素添加overflow:hidden）（不推薦）
• 額外標(biāo)簽法（在最后一個(gè)浮動(dòng)標(biāo)簽后，新加一個(gè)標(biāo)簽，給其設(shè)置clear：both；）（不推薦）
• 使用after偽元素清除浮動(dòng)（推薦使用）
• 使用before和after雙偽元素清除浮動(dòng)