學(xué)過前端的人應(yīng)該都知道CSS的重要性穆壕，所以待牵，在前端開發(fā)的面試中，CSS的面試題會(huì)占到很大一部分的比重粱檀，而其中洲敢，基礎(chǔ)知識(shí)又是必考項(xiàng)，這是體現(xiàn)面試者對(duì)于前端知識(shí)是否掌握好茄蚯，基礎(chǔ)是否牢固的重要證明压彭。
今天，小職就為大家?guī)硪恍┰谇岸碎_發(fā)面試中經(jīng)常會(huì)出現(xiàn)的CSS基礎(chǔ)面試題渗常，看看你都掌握好了嗎壮不？趕緊查漏補(bǔ)缺，前端初學(xué)者也可以通過這些基礎(chǔ)知識(shí)來加深對(duì)CSS的了解哦~
一皱碘、CSS是什么询一？
CSS即層疊樣式表（Cascading Style Sheets），是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言癌椿。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)健蕊，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制踢俄，支持幾乎所有的字體字號(hào)樣式缩功，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
二都办、為什么需要CSS嫡锌？
CSS是Web開發(fā)人員定義其創(chuàng)建的網(wǎng)頁(yè)外觀的一種方式虑稼，旨在允許開發(fā)人員將網(wǎng)站代碼的內(nèi)容和結(jié)構(gòu)與視覺設(shè)計(jì)分開。結(jié)構(gòu)和樣式的分離使HTML可以執(zhí)行其最初基于的更多功能-內(nèi)容標(biāo)記势木，而不必?fù)?dān)心頁(yè)面本身的設(shè)計(jì)和布局蛛倦，這通常稱為“外觀”頁(yè)面。
三啦桌、CSS集成到HTML頁(yè)面的方式有哪些溯壶？
1、設(shè)置標(biāo)簽的style=""屬性震蒋，稱為內(nèi)聯(lián)樣式茸塞；
2躲庄、在HTML的<head>標(biāo)簽中使用<style>標(biāo)簽查剖，稱為嵌入式樣式；
3噪窘、創(chuàng)建并鏈接外部CSS文件笋庄，稱為外部樣式表。
四倔监、css與html結(jié)合有哪些方式直砂？
1、每個(gè)標(biāo)簽加一個(gè)屬性法浩习；
2静暂、head中加style標(biāo)簽；
3谱秽、head中使用頭標(biāo)簽 link洽蛀。
五、CSS樣式（選擇器）的優(yōu)先級(jí)疟赊？
!important > 行內(nèi)樣式 > ID選擇器 > 類選擇器 > 標(biāo)簽選擇器 > 其他
六郊供、標(biāo)準(zhǔn)的CSS的盒子模型與低版本IE的盒子模型的區(qū)別？
標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin
七近哟、CSS三大特性是什么驮审？
CSS 的三大特性分別是層疊性、繼承性吉执、優(yōu)先級(jí)疯淫。
1.層疊性
層疊性是指相同選擇器給設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)覆蓋另一個(gè)沖突的樣式戳玫，層疊性主要解決樣式?jīng)_突的問題熙掺。
層疊性原則:樣式?jīng)_突，則遵循就近原則量九；樣式不沖突适掰，則不層疊颂碧。
2.繼承性
CSS中的繼承:?子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)类浪。恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼载城，降低 CSS 樣式的復(fù)雜性。
子元素可以繼承父元素的樣式费就，如text-诉瓦，font-，line-這些元素開頭的可以繼承力细，以及color屬性睬澡。
行高的繼承性：行高可以跟單位也可以不跟單位；如果子元素沒有設(shè)置行高眠蚂，則會(huì)繼承父元素的行高為 x煞聪；此時(shí)子元素的行高是：當(dāng)前子元素的文字大小 * x；body 行高 x逝慧，這樣寫最大的優(yōu)勢(shì)就是里面子元素可以根據(jù)自己文字大小自動(dòng)調(diào)整行高昔脯。
3、優(yōu)先級(jí)(權(quán)重)
當(dāng)同一個(gè)元素指定多個(gè)選擇器笛臣，就會(huì)有優(yōu)先級(jí)的產(chǎn)生云稚。
八、偽類和偽元素的區(qū)別
偽類是一個(gè)以冒號(hào)作為前綴沈堡，被添加到一個(gè)選擇器末尾的關(guān)鍵字静陈，當(dāng)你希望樣式在特定狀態(tài)才被呈現(xiàn)到指定的元素時(shí)，可以往元素的選擇器后面加上對(duì)應(yīng)的偽類诞丽。偽元素則用于創(chuàng)建一些不在文檔樹中的元素鲸拥，并為其添加樣式。
偽類和偽元素的主要區(qū)別在于率拒，偽類是通過在元素選擇器上加入偽類改變?cè)貭顟B(tài)崩泡。偽元素通過對(duì)元素的操作進(jìn)行對(duì)元素的改變。
九猬膨、CSS3新增偽類有哪些?
p:first-of-type 選擇屬于其父元素的首個(gè)元素角撞；
p:last-of-type 選擇屬于其父元素的最后元素；
p:only-of-type 選擇屬于其父元素唯一的元素勃痴；
p:only-child 選擇屬于其父元素的唯一子元素谒所；
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素；
:checked?單選框或復(fù)選框被選中沛申。
:enabled :disabled 表單控件的禁用狀態(tài)劣领；
十、為什么要初始化CSS樣式
因?yàn)闉g覽器的兼容問題铁材，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的尖淘，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異奕锌。
十一、為什么清除浮動(dòng)村生？如何清除惊暴？
在開發(fā)過程中，浮動(dòng)元素是css中最常用的屬性趁桃，浮動(dòng)起來的元素會(huì)脫離標(biāo)準(zhǔn)流辽话。如果父級(jí)盒子沒有設(shè)置高度就會(huì)造成父級(jí)盒子的高度塌陷，從而影響下面盒子的正常顯示卫病。
清除方法：
1油啤、給父級(jí)盒子添加高度
造成高度塌陷的原因就是父盒子沒有高度，我們只需要給父盒子添加一個(gè)高度即可
2蟀苛、額外標(biāo)簽法
額外標(biāo)簽法會(huì)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽益咬。給這個(gè)標(biāo)簽設(shè)置clear屬性，注意這個(gè)標(biāo)簽必須是塊級(jí)元素
3屹逛、給父級(jí)添加 overflow 屬性
這個(gè)方法是向浮動(dòng)元素的父級(jí)盒子添加voerflow：hidden屬性础废，這樣就可以達(dá)到清除浮動(dòng)的效果
4、給父級(jí)添加after偽元素
利用after偽元素定義一個(gè)clearfix類罕模，浮動(dòng)元素的父級(jí)元素調(diào)用此類可以實(shí)現(xiàn)清除浮動(dòng)的效果
十二、元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎帘瞭？
這需要根據(jù)具體情況來看淑掌，正常來說，當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)蝶念，它是相對(duì)于父容器的寬度計(jì)算的抛腕。但是，對(duì)一些表示豎向距離的屬性媒殉，例如 padding-top , padding-bottom , margin-top , margin-bottom 等担敌，當(dāng)按百分比設(shè)定它們時(shí)，依據(jù)的也是父容器的寬度廷蓉，而不是高度全封。
十三、嵌入式樣式表的優(yōu)缺點(diǎn)是什么桃犬？
1刹悴、優(yōu)點(diǎn):
可以在一個(gè)文檔中創(chuàng)建多種標(biāo)簽類型。
在復(fù)雜情況下攒暇，可以使用選擇器和分組方法來應(yīng)用樣式土匀。
無(wú)需額外下載。
2形用、缺點(diǎn)：無(wú)法控制多個(gè)文檔就轧。
十四证杭、CSS的常用框架有哪些？
1妒御、Bootstrap：美國(guó)Twitter公司的設(shè)計(jì)師基于HTML躯砰、CSS、JavaScript 開發(fā)的簡(jiǎn)潔携丁、直觀琢歇、強(qiáng)悍的前端開發(fā)框架，使得 Web 開發(fā)更加快捷梦鉴。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范李茫，它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫成。
2肥橙、Layui：是一款采用自身模塊規(guī)范編寫的前端 UI 框架魄宏，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低存筏，拿來即用宠互。其外在極簡(jiǎn)，體積輕盈椭坚，組件豐盈予跌，非常適合界面的快速開發(fā)。
3善茎、ElementUI：一套為開發(fā)者券册、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0的桌面端組件庫(kù)。
4垂涯、antd：是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫(kù)烁焙，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。開箱即用的高質(zhì)量 React 組件耕赘，全鏈路開發(fā)和設(shè)計(jì)工具體系骄蝇，數(shù)十個(gè)國(guó)際化語(yǔ)言支持。
十五操骡、px 和 em 的區(qū)別
px全稱pixel像素九火，是相對(duì)于屏幕分辨率而言的，它是一個(gè)絕對(duì)單位当娱，但同時(shí)具有一定的相對(duì)性吃既。在同一個(gè)設(shè)備上每個(gè)像素代表的物理長(zhǎng)度是固定不變的，這點(diǎn)表現(xiàn)的是絕對(duì)性跨细。但是在不同的設(shè)備之間每個(gè)設(shè)備像素所代表的物理長(zhǎng)度是可以變化的鹦倚，這點(diǎn)表現(xiàn)的是相對(duì)性。
em是一個(gè)相對(duì)長(zhǎng)度單位冀惭，具體的大小需要相對(duì)于父元素計(jì)算震叙。
十六掀鹅、居中為什么要使用?transform，而不用?marginLeft/Top媒楼？
transform 屬于合成屬性乐尊，對(duì)合成屬性進(jìn)行 transition/animation 動(dòng)畫將會(huì)創(chuàng)建一個(gè)合成層，這使得被動(dòng)畫元素在一個(gè)獨(dú)立的層中進(jìn)行動(dòng)畫划址。通常情況下扔嵌，瀏覽器會(huì)將一個(gè)層的內(nèi)容先繪制進(jìn)一個(gè)位圖中，然后再作為紋理上傳到 GPU夺颤，只要該層的內(nèi)容不發(fā)生改變痢缎，就沒必要進(jìn)行重繪，瀏覽器會(huì)通過重新復(fù)合來形成一個(gè)新的幀世澜。
top/left屬于布局屬性独旷，該屬性的變化會(huì)導(dǎo)致重排，即指對(duì)這些節(jié)點(diǎn)以及受這些節(jié)點(diǎn)影響的其他節(jié)點(diǎn)寥裂，進(jìn)行CSS計(jì)算->布局->重繪過程嵌洼，瀏覽器需要為整個(gè)層進(jìn)行重繪并重新上傳到 GPU，造成了極大的性能開銷封恰。
十七麻养、?什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么俭驮？
響應(yīng)式網(wǎng)站設(shè)計(jì)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端回溺，而不是為每一個(gè)終端做一個(gè)特定的版本』炻埽基本原理是通過媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理。
十八萍恕、style標(biāo)簽寫在body后與body前有什么區(qū)別逸嘀？
頁(yè)面加載自上而下，當(dāng)然是先加載樣式允粤。
寫在body標(biāo)簽后由于瀏覽器以逐行方式對(duì)HTML文檔進(jìn)行解析崭倘，當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染类垫，在windows的IE下可能會(huì)出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁(yè)面閃爍問題）司光。
十九、什么是“漸進(jìn)增強(qiáng)”和“平穩(wěn)退化”?
漸進(jìn)增強(qiáng)是指以最基本的可用性作為出發(fā)點(diǎn)悉患，在保證站點(diǎn)頁(yè)面在低級(jí)瀏覽器中的可用性和可訪問性的基礎(chǔ)之上残家，逐步增加功能及提高用戶體驗(yàn)。我們?nèi)粘５囊恍╅_發(fā)習(xí)慣售躁，例如首先使用標(biāo)記語(yǔ)言編寫頁(yè)面坞淮，然后通過樣式表來控制頁(yè)面樣式等茴晋，其實(shí)都屬于漸進(jìn)增強(qiáng)的概念。
平穩(wěn)退化是指先使用最新的技術(shù)面向高級(jí)瀏覽器構(gòu)建最強(qiáng)的功能及用戶體驗(yàn)回窘，然后再針對(duì)低級(jí)瀏覽器的限制诺擅，逐步衰減那些無(wú)法被支持的功能及體驗(yàn)。在我們?nèi)粘５拈_發(fā)中啡直，先針對(duì)Chrome編寫頁(yè)面代碼烁涌，然后修復(fù)IE中的異常或針對(duì)IE去除那些無(wú)法被實(shí)現(xiàn)的功能特色酒觅，就是一個(gè)典型的平穩(wěn)退化的例子撮执。
在HTML5與 CSS3實(shí)戰(zhàn)中，“漸進(jìn)增強(qiáng)”和“平穩(wěn)退化”這兩個(gè)概念尤其重要了阐滩，怎樣保證使用不斷變化的新技術(shù)來構(gòu)建在主流瀏覽器下都具有基本可用性的站點(diǎn)二打，并針對(duì)高級(jí)瀏覽器進(jìn)行體驗(yàn)提升，這些是我們?cè)陂_發(fā)過程中需要明確的思路掂榔。
上面這些CSS高頻考點(diǎn)你都掌握了嗎继效？如果還有遺漏的地方趕緊記下來吧。作為CSS的基礎(chǔ)装获，并且也是很多公司前端崗位面試的高頻考點(diǎn)瑞信，熟記上面的內(nèi)容可以幫你輕松過面試，避免因?yàn)榛A(chǔ)知識(shí)掌握不牢固而與心儀的公司失之交臂的遺憾哦~
