前端有哪些常見css的面試題目

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)前端有哪些常見css的面試題目，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

1.請(qǐng)說出幾個(gè)html5新特性

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

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

2.z-index的使用

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

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

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

absolute

生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。

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

fixed

生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

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

relative

生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。

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

static

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

inherit

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

4.float的使用

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

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

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

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

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

旋轉(zhuǎn)動(dòng)畫會(huì)涉及到css的兩個(gè)屬性，分別為：

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

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

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

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

8.flex彈性布局

答：1.設(shè)置盒子的display屬性為flex，或者line-flex，其對(duì)應(yīng)還有六個(gè)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的縮寫，默認(rèn)為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è)置多個(gè)軸線的排列方式（flex-start，flex-end，center，spand-around，spand-between，stretch）

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

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

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

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

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

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

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

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

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

答：1. 設(shè)置盒子的網(wǎng)格布局需要設(shè)置display為grid或者line-grid，其對(duì)應(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：定義一個(gè)區(qū)域由多個(gè)單元格組成

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：定義元素放置在哪個(gè)區(qū)域

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

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

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

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

10.常見居中方案

答：

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

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

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

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

5. 通過padding屬性進(jìn)行垂直居中

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

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

8. 高度確定的時(shí)候：絕對(duì)定位+margin來垂直居中

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

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

水平垂直居中方法：

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

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

3. 絕對(duì)定位+transform實(shí)現(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. 使用父元素的偽元素進(jìn)行垂直居中（父元素需要知道高度），設(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)容。

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

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

12.css選擇器

答：通配符選擇器，標(biāo)簽選擇器，類選擇器，id選擇器，屬性選擇器，空格選擇器 大于選擇器 加號(hào)選擇器

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

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

14.em、rem、px的用法

答：

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

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

16.列舉幾個(gè)常見的css3的屬性及用途

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

17.less和sass的用比較

答：

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

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

Less使用較Sass簡(jiǎn)單

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

Sass功能較Less強(qiáng)大

1、sass有變量和作用域

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

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

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

Less和Sass處理機(jī)制不一樣

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

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

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

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

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

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

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

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

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

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

8、JavaScript 賦值——在CSS中使用JavaScript表達(dá)式賦值。

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

上述就是小編為大家分享的前端有哪些常見css的面試題目了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。