在又到了金三銀四的招聘季，不管你是剛?cè)胄械男“?#xff0c;亦或是混跡職場的老鳥，還在為面試前端工程師時不知道面試官要問什么怎么回答而苦惱嗎？為了幫助你獲得面試官的青睞，順利通過面試，跳槽進(jìn)入大廠，走上人生巔峰，整理了一些前端面試，希望對在面試中或?qū)W習(xí)工作中的你有所幫助！

01、CSS3的新特性

盒子陰影：（box-shadow）；

邊框：邊框圓角 （border-radius）、邊框背景圖片 （border-image）；

IE（怪異）盒模型：（box-sizing:border-box）；

背景：背景圖片尺寸（background-size）、規(guī)定背景圖片的位置相對于什么位置來定位（background-origin）、背景的繪制區(qū)域（background-clip）；

彈性布局：flex；

漸變：線性漸變（linear-gradient）、徑向漸變（radial-gradient）；

過渡效果：transition；

2D轉(zhuǎn)換：transform：移動translate(x，y)、旋轉(zhuǎn)rotate(x，y)、翻轉(zhuǎn)skew(x，y)、縮放scale(x，y)；

3D轉(zhuǎn)換：translate3d(tx，ty，tz)、rotate3d(x, y, z, a)、scale3d(sx, sy, sz)、perspective(l)等；

自定義動畫：animation；

媒體查詢：@media。

02、H5的新增特性

新增語義化標(biāo)簽：header、nav、article、section、aside、footer；

新增數(shù)據(jù)存儲方法：sessionStorage、localStorage；

新增視頻 video 標(biāo)簽和音頻 audio 標(biāo)簽；

新增繪畫canvas和svg元素；

新增input標(biāo)簽的type屬性類型：date、time、month、email、url、search、range、color、number；

新增表單input元素驗(yàn)證：required、pattern；

新增獲取用戶地理位置定位API：Geolocation。

03、簡述盒模型

盒模型分為兩種：標(biāo)準(zhǔn)盒模型（W3C盒模型）和怪異盒模型（IE盒模型）。

盒模型是依次由margin（外邊距）+ border（邊框）+ padding（內(nèi)邊距）+ content（內(nèi)容）組成的。

標(biāo)準(zhǔn)盒模型的width指的是內(nèi)容content的寬度，height指的是內(nèi)容content的高度；怪異盒模型（IE盒模型）的width指的是content（內(nèi)容） + padding（內(nèi)邊距）+ border（邊框）的總寬度，height也是同樣。

在IE瀏覽器的IE6、IE7、IE8版本中會觸發(fā)怪異模式（IE盒模型），在其它瀏覽器中默認(rèn)為W3C標(biāo)準(zhǔn)模式。標(biāo)準(zhǔn)（W3C）盒模型的CSS屬性為box-sizing: content-box，怪異（IE）盒模型的CSS屬性為box-sizing: border-box。

04、link標(biāo)簽和import的區(qū)別

link 屬于 html 標(biāo)簽，可以加載css文件，還可以定義RSS、rel連接屬性等；而@import 是 css 提供的，是有導(dǎo)入樣式的作用。

頁面被加載時，link 會同時被加載，而@import 引用的 css 會等到頁面加載結(jié)束后加載。

link 是 html 標(biāo)簽，因此沒有兼容性，而@import 只有 IE5 以上才能識別。

link 方式樣式的權(quán)重高于@import 的。

link可以使用js動態(tài)創(chuàng)建并導(dǎo)入，@import則不行。

05、水平垂直居中的實(shí)現(xiàn)方式

CSS中實(shí)現(xiàn)元素水平垂直居中的幾種方法總結(jié)，總有一種適合你！

06、CSS中的BFC

一文弄懂CSS中的BFC

07、塊元素和行元素區(qū)別

行內(nèi)元素會在一行上顯示，當(dāng)此行上剩余的空間無法承載當(dāng)前的行內(nèi)元素時，此行內(nèi)元素才會在新的一行上顯示，每個元素是水平排列的；每個塊級元素各占據(jù)一行，每個元素時豎直方向排列的。

塊級元素可以包含行內(nèi)元素和塊級元素，寬度默認(rèn)100%，即和瀏覽器同寬。行內(nèi)元素不能包含塊級元素。

行內(nèi)元素與塊級元素屬性的不同，主要是盒模型屬性上。

常見的塊元素有div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、header、section、article、footer等。

常見的行元素以及行內(nèi)塊元素有span、img、a、label、input、em、i、textarea、select、strong等。

轉(zhuǎn)為塊元素：display: block;

轉(zhuǎn)為行元素：display: inline;

轉(zhuǎn)為行內(nèi)塊元素：display: inline-block。

08、高度塌陷和清除浮動

高度塌陷：

標(biāo)準(zhǔn)的文檔流，在不給父元素設(shè)置高度的情況下，父元素的高度是由子元素?fù)伍_的，子元素多高，父元素就多高，但當(dāng)子元素設(shè)置浮動后，子元素會脫離標(biāo)準(zhǔn)文檔流，從而導(dǎo)致不占位置，父元素的高度就會變?yōu)?0，這種現(xiàn)象，叫做高度塌陷。

高度塌陷大部分都是由子元素脫標(biāo)不占位置導(dǎo)致的父元素高度的丟失，一般在子元素浮動后會產(chǎn)生高度塌陷。所以，解決的辦法可以使用清除浮動的方式來解決。

清除浮動的方式：

浮動的元素會脫離標(biāo)準(zhǔn)文檔流，脫離標(biāo)準(zhǔn)文檔流的元素在文檔流中不占位置。

給浮動元素的父元素設(shè)置高度；
給父元素設(shè)置overflow: hidden屬性；
在父元素內(nèi)部的最后面添加一個塊級元素的空標(biāo)簽，并給這個空標(biāo)簽設(shè)置clear: both；
單偽元素:

.clearfix::after { content: ''; clear: both; display: block; height: 0; visibility: hidden; zoom: 1; 
}

雙偽元素(推薦使用)：

.clearfix::before, .clearfix::after { content: ''; clear: both; display: block; height: 0; visibility: hidden; zoom: 1; 
}

09、position的屬性及作用

position 幾個屬性一般都要配合"left"、“top”、"right"以及 “bottom” 屬性使用。

相對定位relative：如果對一個元素進(jìn)行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點(diǎn)進(jìn)行移動。在使用相對定位時，無論是否進(jìn)行移動，元素仍然占據(jù)原來的空間。因此，移動元素會導(dǎo)致它覆蓋其它元素。

絕對定位absolute：絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于。absolute 定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。absolute 定位的元素和其他元素重疊。

固定定位fixed：元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動。Fixed 定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。Fixed 定位的元素和其他元素重疊。

粘性定位sticky：元素先按照普通文檔流定位，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。而后，元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位。

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

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

10、實(shí)現(xiàn)元素隱藏的方法

設(shè)置透明度為0：opacity: 0；
元素顯示設(shè)為無：display: none（在網(wǎng)頁中不占位置）；
隱藏元素：visibility: hidden（網(wǎng)頁中依然占據(jù)位置）；
讓元素縮小到0：transform: scale(0)；
設(shè)置元素的層級：z-index: 9999，元素需要設(shè)置position: absolute。

11、css reset的作用

重置瀏覽器的css默認(rèn)屬性，因?yàn)楦鱾€品牌瀏覽器的默認(rèn)樣式不用，使用css reset重置，使在各個瀏覽器上樣式統(tǒng)一。

12、css sprites(css精靈)的作用

CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了，減輕服務(wù)器對圖片的請求數(shù)量。原理就是利用CSS的background-image、background- repeat、background-position的組合進(jìn)行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置。

13、css有哪些選擇器，優(yōu)先級如何

主要的選擇器有：id、class、標(biāo)簽、偽元素、偽類、屬性選擇、通配符、繼承等。

同一元素引用了多個樣式時，排在后面的樣式屬性的優(yōu)先級高；

樣式選擇器的類型不同時，優(yōu)先級順序?yàn)?#xff1a;id 選擇器 > class 選擇器 > 標(biāo)簽選擇器；

標(biāo)簽之間存在層級包含關(guān)系時，后代元素會繼承祖先元素的樣式。如果后代元素定義了與祖先元素相同的樣式，則祖先元素的相同的樣式屬性會被覆蓋。繼承的樣式的優(yōu)先級比較低，至少比標(biāo)簽選擇器的優(yōu)先級低；

帶有!important 標(biāo)記的樣式屬性的優(yōu)先級最高；

樣式表的來源不同時，優(yōu)先級順序?yàn)?#xff1a;內(nèi)聯(lián)樣式> 內(nèi)部樣式 > 外部樣式 > 瀏覽器用戶

自定義樣式 > 瀏覽器默認(rèn)樣式。

優(yōu)先級：！important > 行內(nèi)樣式 > id > class > 標(biāo)簽/偽類/屬性選擇 > 偽元素 > 繼承 >通配符

14、transition和animation的區(qū)別

transition 是過渡效果，只有兩個狀態(tài)：起始狀態(tài)和結(jié)束狀態(tài)，主要強(qiáng)調(diào)樣式值的變化過程，不可設(shè)置中間狀態(tài)；需要某個事件的觸發(fā)（例如：鼠標(biāo)經(jīng)過、點(diǎn)擊等）。

animation 是動畫，也叫關(guān)鍵幀，可以設(shè)置多個關(guān)鍵幀；可以再任意一個中間幀設(shè)置狀態(tài)；不需要依附事件的觸發(fā)就可以自動執(zhí)行。

15、css去掉iPhone的默認(rèn)按鈕樣式

input[type="button"], 
input[type="submit"], 
input[type="reset"] {-webkit-appearance: none;
}
textarea { -webkit-appearance: none;
}

16、Doctype的作用

DOCTYPE標(biāo)簽是一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明，它的目的是要告訴標(biāo)準(zhǔn)通用標(biāo)記語言解析器，它應(yīng)該使用什么樣的文檔類型定義（DTD）來解析文檔。只有確定了一個正確的文檔類型，超文本標(biāo)記語言或可擴(kuò)展超文本標(biāo)記語言中的標(biāo)簽和層疊樣式表才能生效，甚至對JavaScript腳本都會有所影響。

標(biāo)簽完整格式為<!DOCTYPE>。

17、嚴(yán)格模式和混雜模式的區(qū)別

標(biāo)準(zhǔn)模式是指瀏覽器按照W3C的標(biāo)準(zhǔn)對文檔進(jìn)行解析和渲染；怪異模式瀏覽器按照舊有的、非標(biāo)準(zhǔn)的實(shí)現(xiàn)方式對文檔進(jìn)行解析和渲染。瀏覽器解析時到底使用標(biāo)準(zhǔn)模式還是怪異模式，與你網(wǎng)頁中的文檔類型定義（DTD）聲明直接相關(guān)，文檔類型定義（DTD）聲明定義了標(biāo)準(zhǔn)文檔的類型（標(biāo)準(zhǔn)模式解析）文檔類型，會使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁并顯示，忽略文檔類型定義（DTD）聲明,將使網(wǎng)頁進(jìn)入怪異模式。

為什么會產(chǎn)生這兩種模式呢?

現(xiàn)代的瀏覽一般都有兩種渲染模式：標(biāo)準(zhǔn)模式（Standard Mode）和怪異模式（Quirks Mode）。在標(biāo)準(zhǔn)模式下，瀏覽器按照HTML和CSS標(biāo)準(zhǔn)對文檔進(jìn)行解析和渲染；而在怪異模式下瀏覽器則按照舊有的非標(biāo)準(zhǔn)的實(shí)現(xiàn)方式對文檔進(jìn)行解析和渲染，對于舊有的網(wǎng)頁，瀏覽器就會啟動怪異模式能夠使得舊網(wǎng)頁正常顯示。

觸發(fā)嚴(yán)格模式:

<!-- HTML 4.01 嚴(yán)格型 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!-- XHTML 1.0 嚴(yán)格型 --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

觸發(fā)混雜模式

<!-- HTML 4.01 過渡型 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><!-- HTML 4.01 框架集型 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd"><!-- XHTML 1.0 過渡型 --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- XHTML 1.0 框架集型 --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

18、雙邊距重疊問題(外邊距折疊)

多個相鄰（兄弟或者父子關(guān)系）普通流的塊元素垂直方向 marigin 會重疊。

折疊的結(jié)果為：

兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。

兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值。

兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。

19、清除元素模式轉(zhuǎn)化為行內(nèi)塊后出現(xiàn)的縫隙

元素的模式轉(zhuǎn)換為行內(nèi)塊后，行內(nèi)塊元素之間會產(chǎn)生縫隙，往往是因?yàn)榇a換行導(dǎo)致的。

給父元素設(shè)置 font-size:0;給行內(nèi)塊元素重新設(shè)置 font-size 大小（推薦）；
給行內(nèi)塊元素設(shè)置左外邊距或右外邊距，并將值設(shè)置為負(fù)值；
使用 display:table;和 display:table-cell;屬性代替 display:inline-block;
在父元素上設(shè)置 display:flex;屬性（推薦）；
手動刪除行內(nèi)塊之間的換行。

20、rgba()和opacity的透明效果區(qū)別

rgba()和 opacity 都能實(shí)現(xiàn)透明效果，但最大的不同是 opacity 作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度；rgba() 只作用于元素的顏色或其背景色。（設(shè)置 rgba 透明的元素的子元素不會繼承透明效果！）

總結(jié)

感謝您的閱讀！本篇文章就先總結(jié)到這里，近期會一直更新web前端的面試，包括html+css、js、es6、vue等專題內(nèi)容，希望這些前端知識對您面試或者工作學(xué)習(xí)中有所幫助提升。想要文章，您可以移步到wxgzh【前端胡說】的菜單欄【優(yōu)質(zhì)文章】中觀看閱讀。

原文鏈接：2023前端面試題集（含答案）之HTML+CSS篇（一）