前端常見css的面試題目

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

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

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

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

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

針對子元素：給浮動的子元素後面再加一個元素，加上一個clear：both屬性即可正常顯示，缺點是隨意添加了一個空元素，不符合代碼規範針對父元素：為父元素後面添加一個相鄰的空元素，設定clear屬性，但只是讓後面的元素正常顯示，並沒有撐開父元素的高度針對父元素：給父元素設定高度，可以正常顯示，但擴展性不好，因為一般都是由裡面的內容來撐開高度針對父元素：給父元素設定display : inline-block，可以正常顯示，但父元素的margin：auto失效了，而且會發現上下兩個部分會出現間隙針對父元素：給父元素設置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的值

:warning:：設定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：定義元素自己的水平和垂直排列方式

:warning:：當設定為網格佈局後，子元素的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.偽元素的使用

答：

常見偽類別－:hover,:link,:active,:target,:not() ,:focus。常見偽元素－::first-letter，::first-line，::before，::after，::selection::before和::after下特有的content，用於在css渲染中為元素邏輯上的頭部或尾部添加內容。 這些新增不會出現在DOM中，不會改變文件內容，不可複製，只是在css渲染層加入。

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

12.css選擇器

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

13.p設定padding為100%的表現形式

#答案：不管是標準模式或box-sizing模式下，padding都為元素的總寬度是部分，所以此時p的表現為對應p的顏色

14.em、rem、px的用法

##14.em、rem、px的用法

答案：

em是相對長度單位。相對於目前物件內文字的字體尺寸。如目前對行內文字的字體尺寸未被人為設置，則相對於瀏覽器的預設字體尺寸。 rem相對的只是HTML根元素的font-size的大小來進行計算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強大######1、sass有變數和作用域######2、sass有函數的概念######3、進程控制：條件、循環遍歷、繼承、引用######4、資料結構：陣列、map######Less和Sass處理機制不一樣######前者是透過客戶端處理的，後者是透過服務端處理，相比較之下前者解析會比後者慢一點。 ######關於變數在Less和Sass中的唯一差異就是Less用@，Sass用$相同之處######Less和Sass在語法上有些共性，例如下面這些：#### ##1、混入(Mixins)－class中的class；###

2、參數混入－可以傳遞參數的class，就像函數一樣；

3、嵌套規則－Class中嵌套class，從而減少重複的程式碼；

4、運算－CSS中用上數學；

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

6、名字空間(namespace)－分組樣式，從而可以被調用;

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

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

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

相關教學推薦：CSS影片教學

#

以上是前端常見css的面試題目的詳細內容。更多資訊請關注PHP中文網其他相關文章！