隨著疫情的不斷好轉(zhuǎn)，各地都開始逐步的復(fù)工，當然對我們來說，也馬上迎來所謂的金三銀四跳槽季。在此，分享自己在前端領(lǐng)域中積累的一些經(jīng)驗，供自己溫故知新。

對于前端來說，涉及的知識面廣，內(nèi)容繁多，但是萬變不離其宗，主要也就是圍繞著html(5)，css(less,scss,sass,styus,css3),js(es5,es6),以及常見的幾大熱門框架vue，react等，話不多說，直接開始進入主題。

專題推薦：2020年CSS面試題匯總（最新）

1.請說出幾個html5新特性

答：html5增加的新特性具體為：

1、新增的語義/結(jié)構(gòu)化標簽，如增加了footer，article，main，nav等；
2、新增的input的type類型和屬性，如：email，tel，number等；
3、HTML5專有的API 地理位置 本地存儲 緩存等
4、新的圖形標簽 svg canvas 二者區(qū)別
5、新的多媒體標簽 video audio source
6、廢棄的一些元素標簽，如：font
7、自定義元素標簽
8、DOCTYPE 和字符編碼charset聲明

2.z-index的使用

答：z-index是用于設(shè)置標簽的層級關(guān)系，使用z-index的時候需要同時設(shè)置標簽的position屬性（如relative或者absolute或者fixed都可），標簽的默認z-index為0，可以設(shè)置負數(shù)，值越大，越在頂部

3.position的屬性以及使用方式

答：position是css的定位屬性，其主要包括以下幾個不同的屬性值，具體如下：

absolute

生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。

元素的位置通過 “l(fā)eft”, “top”, “right” 以及 “bottom” 屬性進行規(guī)定。

fixed

生成絕對定位的元素，相對于瀏覽器窗口進行定位。

元素的位置通過 “l(fā)eft”, “top”, “right” 以及 “bottom” 屬性進行規(guī)定。

relative

生成相對定位的元素，相對于其正常位置進行定位。

因此，”left:20” 會向元素的 left 位置添加 20 像素。

static

默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

inherit

規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

4.float的使用

答：屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。具體如下：

float造成的效果使元素本身變成了類似于inline-block的元素使包裹它的元素忽略它的高度，即父元素沒有了高度如：給子元素box設(shè)置了height:100px;此時的父元素height也是100px。float的影響float使元素脫離了文檔流按照指定的方向發(fā)生了移動，直到它的外邊緣碰到包含框或者另一個浮動的邊框為止。浮動只會影響他后面的元素，如果上面的元素不浮動，他也不會上去的 如果父元素太窄，無法容納所有的浮動元素，無法容納的浮動元素會換行顯示。以換行的那個元素為基準，如果有浮動元素的高度大于換行的那個元素，那么當換行元素換行時會被高的那個元素"卡住"5.清除浮動影響的方式

答：float會造成文檔流的破壞，因此，需要消除float所造成的影響一般有如下幾種方案解決：

針對子元素：給浮動的子元素后面再加一個元素，加上一個clear：both屬性即可正常顯示，缺點是隨意添加了一個空元素，不符合代碼規(guī)范針對父元素：給父元素后面添加一個相鄰的空元素，設(shè)置clear屬性，但只是讓后面的元素正常顯示，并沒有撐開父元素的高度針對父元素：給父元素設(shè)置高度，可以正常顯示，但擴展性不好，因為一般都是由里面的內(nèi)容來撐開高度針對父元素：給父元素設(shè)置display: inline-block，可以正常顯示，但父元素的margin：auto失效了，而且會發(fā)現(xiàn)上下兩個部分會出現(xiàn)間隙針對父元素：給父元素設(shè)置overflow: hidden，可以正常顯示了，但需要配合寬度，否則會默認占滿一行。6.css動畫屬性（如使用css制動一個旋轉(zhuǎn)三角形）

答：制作一個三角形可以直接使用border的屬性，具體為可以設(shè)置盒子的高寬度為0px，然后設(shè)置對應(yīng)寬度的不同border的顏色屬性，三角形對應(yīng)的底邊設(shè)置為具體的三角形顏色，其對應(yīng)變不設(shè)置或者設(shè)置為寬度為0 另外兩個斜邊設(shè)置為transparent

旋轉(zhuǎn)動畫會涉及到css的兩個屬性，分別為：

1）transition：動畫屬性，可以寫四個值 分別為對應(yīng)動畫的屬性名稱或者直接設(shè)置all、動畫完成的時間（單位為s或者ms）、動畫的變化曲線、動畫開始的時間

2）transform：旋轉(zhuǎn)屬性 主要有rotate（弧度旋轉(zhuǎn)分別還有rotate3d，rotateX，rotateY，rotateZ），translate（同理有四個），scale（同理有四個）

7.正規(guī)盒子模型和非正規(guī)盒子模型

答：盒子模型主要是計算標簽的寬度或高度不一致，標準的盒子模型的包括：margin，border，padding以及內(nèi)容的寬度，即：盒子的實際寬度=內(nèi)容的左右margin+左右border+左右padding+內(nèi)容的實際寬度；而在css3中引入了box-sizing屬性，可以改變標準盒子模型的計算方式，具體為：設(shè)置box-sizing：border-box的時候，盒子的實際寬度=內(nèi)容的左右margin+內(nèi)容的實際寬度，當然可以直接設(shè)置box-sizing：content-box的時候即可恢復(fù)正常的標準盒子模型

8.flex彈性布局

答：1.設(shè)置盒子的display屬性為flex，或者line-flex，其對應(yīng)還有六個css屬性，分別為：

1）flex-direction：設(shè)置子元素的排列方式（row，column，row-reverse，column-reverse）

2）flex-warp：設(shè)置子元素的是否換行（nowarp，warp，warp-reverse）

3）flex-flow：flex-direction和flex-warp的縮寫，默認為row nowarp

4）justify-content：設(shè)置子元素的水平排列方式（flex-start，flex-end，center，span-around，span-between）

5）align-items：設(shè)置子元素的垂直方式（flex-start，flex-end，center，stretch，baseline）

6）align-content：設(shè)置多個軸線的排列方式（flex-start，flex-end，center，spand-around，spand-between，stretch）

2. 對應(yīng)的子元素項目也擁有自身的六個css屬性，分別為：

1）order：設(shè)置元素的排列權(quán)重 值越大越在后

2）flex-grow：設(shè)置元素的放大比例

3）flex-shrink：設(shè)置元素的縮小比例

4）flex-basis：設(shè)置多余空間項目主軸所占比例空間

5）flex：flex-grow和flex-shrink和flex-basis的縮寫方式 默認為0 1 auto

6）align-self：設(shè)置子元素自己的垂直排列方式，默認為盒子的align-items的值

:warning:：設(shè)置flex布局后，子元素的float，clear，vertical-align都無效

9.grid網(wǎng)格布局

答：1. 設(shè)置盒子的網(wǎng)格布局需要設(shè)置display為grid或者line-grid，其對應(yīng)包括以下屬性：

1）grid-template-columns：定義每一列的寬度

2）grid-template-rows：定義每一行的高度

3）grid-row-gap：定義行之間的間隙

4）grid-column-gap：定義列之間的間隙

5）grid-gap：定義行和列之間的間隙縮寫

6）grid-teamplate-areas：定義一個區(qū)域由多個單元格組成

7）grid-auto-flow：定義容器排列順序

8）justify-items：定義子元素的內(nèi)容水平排列順序

9）align-items：定義子元素的內(nèi)容垂直排列順序

10）place-items：定義子元素的內(nèi)容水平和垂直順序的縮寫方式

11）justify-content：定義容器（網(wǎng)格）的水平排列順序

12）align-content：定義容器（網(wǎng)格）的垂直排列順序

13）place-content：定義容器的水平和垂直排列順序的縮寫方式

2. 子元素的屬性包括：

1）grid-column-start：列開始的位置

2）grid-column-end：列結(jié)束的位置

3）grid-row-start：行開始的位置

4）grid-row-end：行結(jié)束的位置

5）grid-column：列開始和結(jié)束位置

6）grid-row：行開始和結(jié)束的位置

7）grid-area：定義元素放置在哪個區(qū)域

8）justify-self：定義元素自己的水平排列方式

9）align-self：定義元素自己的垂直排列方式

10）place-self：定義元素自己的水平和垂直排列方式

:warning:：當設(shè)置為網(wǎng)格布局后，子元素的float，inline-block，table-cell，column-*屬性全部失效

10.常見居中方案

答：

1. 行內(nèi)元素水平居中：直接使用text-align：center

2. 行內(nèi)元素垂直居中：vertical-align：middle并設(shè)置父級元素的行高為父級元素的高度

3. 固定寬度的元素 水平居中使用：magin：0 auto

4. flex彈性布局：設(shè)置justify-content：center水平居中，align-items：垂直居中

5. 通過padding屬性進行垂直居中

6. 設(shè)置父級元素為：display：table-cell，vertical-align：middle

7. 通過偽元素設(shè)置垂直居中：設(shè)置父級元素一個偽元素 并設(shè)置其為inline-block，同時設(shè)置vertical-align：middle

8. 高度確定的時候：絕對定位+margin來垂直居中

9. 高度不確定的時候：絕對定位+transform，具體為：設(shè)置需要垂直居中的元素為：position：absolute，top：50%，transform：translateY(-50%)

10. 通過flex-duration：column來垂直居中：display：flex，flex-duration：column，justify-content：center

水平垂直居中方法：

1. 父級元素高度已知，子元素高寬固定（高度可不固定）：text-align：center，line-height：父級高度

2.絕對定位+margin實現(xiàn)垂直水平居中，需要知道子元素高寬度

3. 絕對定位+transform實現(xiàn)垂直水平居中，可以不知道子元素高寬度：position：absolute；top：50%；left：50%；transform：translate（-50%，-50%）

4. 使用display為table，子元素為display：table-cell；vertical-align：center；text-align：center子子元素設(shè)置為vertical-align：center

5. 使用父元素的偽元素進行垂直居中（父元素需要知道高度），設(shè)置偽元素的高度為100%，并設(shè)置vertical-align：middle，display：inline-block；子元素設(shè)置vertical-align：center；display：inline-block（子元素水平居中可以采用text-align：center或者margin：0 auto）

6. 子元素設(shè)置為margin：auto；position：absolute；top：0；left：0；right：0；bottom：0；

11.偽元素的使用

答：

常見偽類——:hover,:link,:active,:target,:not(),:focus。常見偽元素——::first-letter，::first-line，::before，::after，::selection

::before和::after下特有的content，用于在css渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。

這些添加不會出現(xiàn)在DOM中，不會改變文檔內(nèi)容，不可復(fù)制，僅僅是在css渲染層加入。

所以不要用:before或:after展示有實際意義的內(nèi)容，盡量使用它們顯示修飾性內(nèi)容，例如圖標

12.css選擇器

答：通配符選擇器，標簽選擇器，類選擇器，id選擇器，屬性選擇器，空格選擇器 大于選擇器 加號選擇器

13.p設(shè)置padding為100%的表現(xiàn)形式

答：不管是標準模式還是box-sizing模式下，padding都為元素的總寬度是部分，所以此時p的表現(xiàn)為對應(yīng)p的顏色

14.em、rem、px的用法

答：

em是相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸。rem相對的只是HTML根元素的font-size的大小來進行計算px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。15.margin的用法及注意事項

答：margin在使用的時候因為會出現(xiàn)相鄰兩個標簽之間的margin進行合并，即設(shè)置上下兩個標簽的margin-top和margin-bottom的時候，會進行自動的合并，以最大的那個屬性值為兩者之間的實際間隔

16.列舉幾個常見的css3的屬性及用途

答：常見的有：border-radius:設(shè)置標簽的圓角；box-shadow：設(shè)置陰影，box-sizing：改變盒子模型等

17.less和sass的用比較

答：

不同之處Less環(huán)境較Sass簡單

Sass的安裝需要安裝Ruby環(huán)境，Less基于Javascript，是需要引入Less.js來處理代碼輸出css到瀏覽器，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件，直接放在項目中。

Less使用較Sass簡單

Less并沒有裁剪CSS原有的特性，而是在現(xiàn)有CSS語法的基礎(chǔ)上，為CSS加入程序式語言的特性。

Sass功能較Less強大

1、sass有變量和作用域

2、sass有函數(shù)的概念

3、進程控制：條件、循環(huán)遍歷、繼承、引用

4、數(shù)據(jù)結(jié)構(gòu)：數(shù)組、map

Less和Sass處理機制不一樣

前者是通過客戶端處理的，后者是通過服務(wù)端處理，相比較之下前者解析會比后者慢一點。

關(guān)于變量在Less和Sass中的唯一區(qū)別就是Less用@，Sass用$相同之處

Less和Sass在語法上有些共性，比如下面這些：

1、混入(Mixins)——class中的class；

2、參數(shù)混入——可以傳遞參數(shù)的class，就像函數(shù)一樣；

3、嵌套規(guī)則——Class中嵌套class，從而減少重復(fù)的代碼；

4、運算——CSS中用上數(shù)學(xué)；

5、顏色功能——可以編輯顏色；

6、名字空間(namespace)——分組樣式，從而可以被調(diào)用；

7、作用域——局部修改樣式；

8、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

當然，在涉及到css的時候還會詢問有關(guān)css預(yù)處理語言，如less，scss等，可自行查看相應(yīng)的資料，在此不做過多的講解

相關(guān)教程推薦：CSS視頻教程