隨著疫情的不斷好轉(zhuǎn)，各地都開始逐步的復(fù)工，當(dāng)然對(duì)我們來說，也馬上迎來所謂的金三銀四跳槽季。
在此，分享自己在前端領(lǐng)域中積累的一些經(jīng)驗(yàn)，供自己溫故知新。
對(duì)于前端來說，涉及的知識(shí)面廣，內(nèi)容繁多，但是萬變不離其宗，主要也就是圍繞著html(5)，css(less,scss,sass,styus,css3),js(es5,es6),以及常見的幾大熱門框架vue，react等，話不多說，直接開始進(jìn)入主題。
專題推薦：
2020年CSS面試題匯總（最新）1.請(qǐng)說出幾個(gè)html5新特性答：
html5增加的新特性具體為：
1、新增的語義/結(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 source6、廢棄的一些元素標(biāo)簽，如：
font7、自定義元素標(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)橹埂?br>浮動(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)容來撐開高度針對(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 nowarp4）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 auto6）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：
center2. 行內(nèi)元素垂直居中：
vertical-align：
middle并設(shè)置父級(jí)元素的行高為父級(jí)元素的高度3. 固定寬度的元素 水平居中使用：
magin：
0 auto4. flex彈性布局：
設(shè)置justify-content：
center水平居中，align-items：
垂直居中5. 通過padding屬性進(jìn)行垂直居中6. 設(shè)置父級(jí)元素為：
display：
table-cell，vertical-align：
middle7. 通過偽元素設(shè)置垂直居中：
設(shè)置父級(jí)元素一個(gè)偽元素 并設(shè)置其為inline-block，同時(shí)設(shè)置vertical-align：
middle8. 高度確定的時(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：
center5. 使用父元素的偽元素進(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ì)長度單位。
相對(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ì)長度單位。
像素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簡單Sass的安裝需要安裝Ruby環(huán)境，Less基于Javascript，是需要引入Less.js來處理代碼輸出css到瀏覽器，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件，直接放在項(xiàng)目中。
Less使用較Sass簡單Less并沒有裁剪CSS原有的特性，而是在現(xiàn)有CSS語法的基礎(chǔ)上，為CSS加入程序式語言的特性。
Sass功能較Less強(qiáng)大1、sass有變量和作用域2、sass有函數(shù)的概念3、進(jìn)程控制：
條件、循環(huán)遍歷、繼承、引用4、數(shù)據(jù)結(jié)構(gòu)：
數(shù)組、mapLess和Sass處理機(jī)制不一樣前者是通過客戶端處理的，后者是通過服務(wù)端處理，相比較之下前者解析會(huì)比后者慢一點(diǎn)。
關(guān)于變量在Less和Sass中的唯一區(qū)別就是Less用@，Sass用$相同之處Less和Sass在語法上有些共性，比如下面這些：
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ù)處理語言，如less，scss等，可自行查看相應(yīng)的資料，在此不做過多的講解相關(guān)教程推薦：
CSS視頻教程以上就是前端常見css的面試題目的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
css 面試題目 前端面試本文轉(zhuǎn)載于：
jb51，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
web前端面試中10個(gè)關(guān)于css高頻面試題
下一篇：
2020 CSS3面試題相關(guān)文章相關(guān)視頻HTML css面試題_html/css_WEB-...2020年大前端面試題匯總（收藏）經(jīng)典CSS面試題七道重要CSS面試題前端常見css的面試題目和頁面布局有關(guān)的CSS屬性（一）和頁面布局有關(guān)的CSS屬性（二）和頁面布局有關(guān)的CSS屬性（三）LESS CSS框架簡介 [做網(wǎng)站css教程]