前端常見面試-css篇

隨着疫情的不斷好轉，各地都開始逐步的復工，固然對咱們來講，也立刻迎來所謂的金三銀四跳槽季。在此，分享本身在前端領域中積累的一些經驗，供本身溫故知新。

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

1.請說出幾個html5新特性

答：html5增長的新特性具體爲：

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

2.z-index的使用

答：z-index是用於設置標籤的層級關係，使用z-index的時候須要同時設置標籤的position屬性（如relative或者absolute或者fixed均可），標籤的默認z-index爲0，能夠設置負數，值越大，越在頂部

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

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

absolute 

生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。 
元素的位置經過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。 

fixed 

生成絕對定位的元素，相對於瀏覽器窗口進行定位。 
元素的位置經過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。 

relative 

生成相對定位的元素，相對於其正常位置進行定位。 
所以，」left:20」 會向元素的 left 位置添加 20 像素。 

static 

默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 

inherit 

規定應該從父元素繼承 position 屬性的值。

4.float的使用

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

float形成的效果

1. 使元素自己變成了相似於inline-block的元素
2. 使包裹它的元素忽略它的高度，即父元素沒有了高度
3. 如：給子元素box設置了height:100px;此時的父元素height也是100px。

float的影響

1. float使元素脫離了文檔流按照指定的方向發生了移動，直到它的外邊緣碰到包含框或者另外一個浮動的邊框爲止。
2. 浮動只會影響他後面的元素，若是上面的元素不浮動，他也不會上去的
3.  若是父元素太窄，沒法容納全部的浮動元素，沒法容納的浮動元素會換行顯示。
4. 以換行的那個元素爲基準，若是有浮動元素的高度大於換行的那個元素，那麼當換行元素換行時會被高的那個元素"卡住"

5.清除浮動影響的方式

答：float會形成文檔流的破壞，所以，須要消除float所形成的影響通常有以下幾種方案解決：

1. 針對子元素：給浮動的子元素後面再加一個元素，加上一個clear：both屬性便可正常顯示，缺點是隨意添加了一個空元素，不符合代碼規範
2. 針對父元素：給父元素後面添加一個相鄰的空元素，設置clear屬性，但只是讓後面的元素正常顯示，並無撐開父元素的高度
3. 針對父元素：給父元素設置高度，能夠正常顯示，但擴展性很差，由於通常都是由裏面的內容來撐開高度
4. 針對父元素：給父元素設置display: inline-block，能夠正常顯示，但父元素的margin：auto失效了，並且會發現上下兩個部分會出現間隙
5. 針對父元素：給父元素設置overflow: hidden，能夠正常顯示了，但須要配合寬度，不然會默認佔滿一行。

6.css動畫屬性（如使用css制動一個旋轉三角形）

答：製做一個三角形能夠直接使用border的屬性，具體爲能夠設置盒子的高寬度爲0px，而後設置對應寬度的不一樣border的顏色屬性，三角形對應的底邊設置爲具體的三角形顏色，其對應變不設置或者設置爲寬度爲0 另外兩個斜邊設置爲transparent
旋轉動畫會涉及到css的兩個屬性，分別爲：
1）transition：動畫屬性，能夠寫四個值 分別爲對應動畫的屬性名稱或者直接設置all、動畫完成的時間（單位爲s或者ms）、動畫的變化曲線、動畫開始的時間
2）transform：旋轉屬性 主要有rotate（弧度旋轉分別還有rotate3d，rotateX，rotateY，rotateZ），translate（同理有四個），scale（同理有四個）

7.正規盒子模型和非正規盒子模型

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

8.flex彈性佈局

答：1.設置盒子的display屬性爲flex，或者line-flex，其對應還有六個css屬性，分別爲：

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

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

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

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

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

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

2. 對應的子元素項目也擁有自身的六個css屬性，分別爲：

1）order：設置元素的排列權重 值越大越在後

2）flex-grow：設置元素的放大比例

3）flex-shrink：設置元素的縮小比例

4）flex-basis：設置多餘空間項目主軸所佔比例空間

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

6）align-self：設置子元素本身的垂直排列方式，默認爲盒子的align-items的值

⚠️：設置flex佈局後，子元素的float，clear，vertical-align都無效

9.grid網格佈局

答：1. 設置盒子的網格佈局須要設置display爲grid或者line-grid，其對應包括如下屬性：

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 子元素的屬性包括：

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

2）grid-column-end：列結束的位置

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

4）grid-row-end：行結束的位置

5）grid-column：列開始和結束位置

6）grid-row：行開始和結束的位置

7）grid-area：定義元素放置在哪一個區域

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

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

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

⚠️：當設置爲網格佈局後，子元素的float，inline-block，table-cell，column-*屬性所有失效

10.常見居中方案

答：1. 行內元素水平居中：直接使用text-align：center

2. 行內元素垂直居中：vertical-align：middle並設置父級元素的行高爲父級元素的高度

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

4. flex彈性佈局：設置justify-content：center水平居中，align-items：垂直居中

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

6. 設置父級元素爲：display：table-cell，vertical-align：middle

7. 經過僞元素設置垂直居中：設置父級元素一個僞元素 並設置其爲inline-block，同時設置vertical-align：middle

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

9. 高度不肯定的時候：絕對定位+transform，具體爲：設置須要垂直居中的元素爲：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實現垂直水平居中，須要知道子元素高寬度

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

4. 使用display爲table，子元素爲display：table-cell；vertical-align：center；text-align：center子子元素設置爲vertical-align：center

5. 使用父元素的僞元素進行垂直居中（父元素須要知道高度），設置僞元素的高度爲100%，並設置vertical-align：middle，display：inline-block；子元素設置vertical-align：center；display：inline-block（子元素水平居中能夠採用text-align：center或者margin：0 auto）

6. 子元素設置爲margin：auto；position：absolute；top：0；left：0；right：0；bottom：0；

11.僞元素的使用

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

::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部添加內容。
這些添加不會出如今DOM中，不會改變文檔內容，不可複製，僅僅是在css渲染層加入。
因此不要用:before或:after展現有實際意義的內容，儘可能使用它們顯示修飾性內容，例如圖標

12.css選擇器

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

13.div設置padding爲100%的表現形式

答：不論是標準模式仍是box-sizing模式下，padding都爲元素的總寬度是部分，因此此時div的表現爲對應div的顏色

14.em、rem、px的用法

1. em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
2. rem相對的只是HTML根元素的font-size的大小來進行計算
3. px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。

15.margin的用法及注意事項

答：margin在使用的時候由於會出現相鄰兩個標籤之間的margin進行合併，即設置上下兩個標籤的margin-top和margin-bottom的時候，會進行自動的合併，以最大的那個屬性值爲二者之間的實際間隔

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

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

17.less和sass的用比較

不一樣之處

Less環境較Sass簡單

Sass的安裝須要安裝Ruby環境，Less基於Javascript，是須要引入Less.js來處理代碼輸出css到瀏覽器，也能夠在開發環節使用Less，而後編譯成css文件，直接放在項目中。

Less使用較Sass簡單

　Less並無裁剪CSS原有的特性，而是在現有CSS語法的基礎上，爲CSS加入程序式語言的特性。

Sass功能較Less強大

一、sass有變量和做用域

二、sass有函數的概念

三、進程控制：條件、循環遍歷、繼承、引用

四、數據結構：數組、map

Less和Sass處理機制不同

前者是經過客戶端處理的，後者是經過服務端處理，相比較之下前者解析會比後者慢一點。

關於變量在Less和Sass中的惟一區別就是Less用@，Sass用$

相同之處

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

一、混入(Mixins)——class中的class；
二、參數混入——能夠傳遞參數的class，就像函數同樣；
三、嵌套規則——Class中嵌套class，從而減小重複的代碼；
四、運算——CSS中用上數學；
五、顏色功能——能夠編輯顏色；
六、名字空間(namespace)——分組樣式，從而能夠被調用；
七、做用域——局部修改樣式；
八、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

固然，在涉及到css的時候還會詢問有關css預處理語言，如less，scss等，可自行查看相應的資料，在此不作過多的講解