2022最新Web前端經(jīng)典面試試題及答案——CSS篇

1、2022最新Web前端經(jīng)典面試試題及答案CSS篇起點(diǎn)低怕什么，大不了加倍努力。人生就像一場(chǎng)馬拉松比賽，拼的不是起點(diǎn)，而是堅(jiān)持的耐力和成長(zhǎng)的速度。只要努力不止，進(jìn)步也會(huì)不止。-、談?wù)勀銓?duì)BFC的理解及作用。BFC是Block Formatting Context格式化上下文的縮寫就是頁(yè)面上一個(gè)隔離的獨(dú)立容器，容器內(nèi)的子元素不會(huì)影響到外面的元素。有一個(gè) 獨(dú)立的塊級(jí)渲染區(qū)域該區(qū)域有一套渲染規(guī)那么來(lái)約束盒子的布局,與外部的區(qū)域沒(méi)有關(guān)系。如何創(chuàng)立BFCfloat的值不為noneposition 的值為 absolute 或 fixedoverflow 的值不為 visibledisplay 的值不為 i

2、nline-block、flex、inline-flexBFC的特性內(nèi)部的box會(huì)在垂直方向，一個(gè)接一個(gè)的放置。box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊BFC的區(qū)域不會(huì)與浮動(dòng)區(qū)域的box重疊BFC在頁(yè)面上是一個(gè)獨(dú)立的容器，外面的元素不會(huì)影響B(tài)FC內(nèi)的元素，里面的子元素也不會(huì)影響外邊元素。計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算BFC的作用,取消盒子的margin塌陷清除內(nèi)部浮動(dòng)，不會(huì)影響外面元素，可以阻止元素被浮動(dòng)元素覆蓋。二、兩欄布局，有幾種實(shí)現(xiàn)方式？常見(jiàn)的有5種方式分別為：flex布局grid布局圣杯布局雙飛翼布局系統(tǒng)的浮動(dòng)布局使用f

3、lex布局使用flex布局，是目前主流的方式。實(shí)現(xiàn)方式：父容器設(shè)置display:flex，定寬元素設(shè)置width，自適應(yīng)的子元素設(shè)置flex:1或flex-grow:1。使用grid布局實(shí)現(xiàn)方式：父級(jí)元素設(shè)置 display:grid 使用 grid-template-columns 和 grid-template-rows 設(shè)置格子子項(xiàng)設(shè)置 grid-column 和 grid-row 設(shè) 置在格子中的位置。IE不支持這種，如果工程需要兼容IE瀏覽器，就不能選它了。圣杯布局實(shí)現(xiàn)方式：定寬兀素和自適應(yīng)兀素都設(shè)置左浮,自適應(yīng)兀素設(shè)置寬度100%，定寬兀素設(shè)置固定寬度,定寬兀素因?yàn)镈OM位置靠后

4、被擠下去, 給定寬元素設(shè)置margin-left:100%此時(shí)定寬元素和自適應(yīng)元素左側(cè)重疊，給容器設(shè)置padding-left的值為定寬元素寬度，給定寬元素設(shè)置定 位和固定寬度。圣杯布局本質(zhì)上利用了浮動(dòng)和負(fù)margin的特性同時(shí)也有一個(gè)要求，自適應(yīng)元素的寬度最小不能小于固定寬度側(cè)邊欄的寬度,否那么會(huì)出現(xiàn)錯(cuò) 亂。雙飛翼布局解決了圣杯布局自適應(yīng)元素寬度小于固定寬度側(cè)邊欄時(shí)出現(xiàn)錯(cuò)亂的問(wèn)題。實(shí)現(xiàn)方式：給自適應(yīng)元素內(nèi)再多加一層div，定寬元素和自適應(yīng)元素都設(shè)置左浮自適應(yīng)元素寬度100%，定寬元素設(shè)置寬度，margin-left: 100%，此時(shí)定寬元素和自適應(yīng)元素左側(cè)重疊給自適應(yīng)元素內(nèi)的div加marg

5、in來(lái)規(guī)避重疊。系統(tǒng)的浮動(dòng)布局實(shí)現(xiàn)方式：定寬元素左浮或右浮，自適應(yīng)的元素設(shè)置margin預(yù)留空間為防止父元素高度塌陷需要給父級(jí)元素加清除浮動(dòng)。該方式對(duì)DOM的結(jié)構(gòu)順序有一定的要求，布局方式較老，現(xiàn)在基本都不用了。三、什么是 css reset ?它的全稱就是reset.css，是一個(gè)css文件，用來(lái)重置瀏覽器默認(rèn)的css樣式。reset被大廠基本都給拋棄了 ,什么原因呢？性能差，使用resst.css文件會(huì)把使用到和使用不到的樣式文件都加載進(jìn)來(lái)出現(xiàn)代碼冗余，所以被一起企業(yè)已經(jīng)拋棄了。normalize與reset.css 一樣，是一個(gè)樣式的重置庫(kù)。主要是為了增強(qiáng)跨瀏覽器渲染的一致性。四、網(wǎng)頁(yè)中

6、應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？答案是：偶數(shù)。原因：偶數(shù)讓文字在瀏覽器上更好看。Ui給前端的設(shè)計(jì)圖一般都是偶數(shù)，這樣不管布局也好，轉(zhuǎn)換px也好，會(huì)方便一些。感興趣了，大家找一個(gè)左右對(duì)稱的文字，比方中“、“十”設(shè)置一個(gè)偶數(shù)一個(gè)奇數(shù)，觀察下。五、CSS優(yōu)先級(jí)算法，如何計(jì)算？總結(jié)性地回答：選中且設(shè)置limportant的 權(quán)重高的 權(quán)重相同位置靠后的 來(lái)自繼承的。如果兩組選擇器都定位到同一元素，且對(duì)同一屬性設(shè)置不同的樣式那么需要分別計(jì)算兩組選擇器的權(quán)重來(lái)確定優(yōu)先級(jí)。一個(gè)選擇器的優(yōu)先級(jí)可以由四局部計(jì)算得分：千位：如果聲明在style的屬性里那么該局部得一分。百位：選擇器包含id選擇器那么該位得一

7、分。十位：選擇器包含類、屬性選擇器和偽類那么該位得一分。個(gè)位：選擇器包含標(biāo)簽、偽元素選擇器，那么該位得一分。面試題：.box h1#title color:red #box hi.title color:blue 愛(ài)學(xué)習(xí)的前端人v/h1答案是：藍(lán)色！六 css盒模型是啥？網(wǎng)頁(yè)中每個(gè)元素都占有一定的空間可以看成盒子，這個(gè)盒子的組成有：外邊距、元素的邊框、元素的內(nèi)邊距、元素的內(nèi)容這四個(gè)局部一 起構(gòu)成了盒子模型。css的盒子模型分為兩種：標(biāo)準(zhǔn)盒子模型和IE盒子模型。兩種盒子模型的區(qū)別：標(biāo)準(zhǔn)盒子模型的內(nèi)容有：margin、border、padding、content 它的width 一般只包含內(nèi)容，不

8、包含padding border和margin。盒子的大小會(huì)以內(nèi)容優(yōu)先自動(dòng)擴(kuò)展，子元素可以撐開(kāi)父元素。(標(biāo)準(zhǔn))盒子總寬度=margin + border + padding + widthIE盒子模型的內(nèi)容有:margin content ( padding + border + content )IE盒子中子元素?zé)o法撐開(kāi)父元素的盒模型元素的寬度實(shí)際上包含了content padding和border 所以：(IE )盒子總寬度=margin + width通過(guò)css如何轉(zhuǎn)換呢？使用box-sizing屬性可以任意轉(zhuǎn)換盒子模型。具體的屬性值有：1、content-box :定義盒子為標(biāo)準(zhǔn)盒子模

9、型，也是默認(rèn)值。2、border-box :定義盒子為IE盒子模型。3、inherit :規(guī)定從父元素繼承box-sizing屬性的值。通過(guò)box-sizing屬性，可以將標(biāo)準(zhǔn)盒子模型和IE盒子模型之間進(jìn)行任意轉(zhuǎn)換。七、一個(gè)盒子不給寬高水平垂直居中方式有幾種？共有6種方式分別為：flex 布局。實(shí)現(xiàn)方式為 display:flex 、align-item:center Si justify-content:center。flex布局的另外一種實(shí)現(xiàn)方式是display:flex和margin:auto。grid 布局其中一種實(shí)現(xiàn)方式為 display:grid x align-item:cent

10、er justify-content:center grid布局另外一種實(shí)現(xiàn)方式是display:grid和margin:auto table-cell。實(shí)現(xiàn)方式為 display:table-cell 、vertical-align:middle 和 text-align:center translate +絕對(duì)定位。實(shí)現(xiàn)云式為相對(duì)和絕對(duì)定位相結(jié)合絕對(duì)定位的元素添加left:50%、top:50%和transform:translate150% ,- 50%）。八、CSS中的單位有哪些？以及它們之間的區(qū)別。css中的單位共有15種。它們可分為兩大類：絕對(duì)長(zhǎng)度:cm、mm、in、px、pt、p

11、c。相對(duì)長(zhǎng)度：ex、ch、em、rpx、rem、vw、vh、vmin、vmax、% 它們之間的介紹以及區(qū)別：1、px :像素，是網(wǎng)頁(yè)內(nèi)常用的單位，也是基本單位。常聽(tīng)到的電腦像素是1024*768 表示的就是水平方向1024個(gè)像素點(diǎn)垂直方向768 個(gè)像素點(diǎn)。2、rpx :是微信小程序解決自適應(yīng)屏幕尺寸的尺寸單位，微信小程序規(guī)定的屏幕寬度為750rpx。rpx單位可以根據(jù)屏幕進(jìn)行自動(dòng)適應(yīng)。3、em :默認(rèn)字體大小的倍數(shù)。1em的值并不是固定的需要根據(jù)父級(jí)元素字體大小確定。場(chǎng)景1 :字體設(shè)置font-size:2em ，字體大小繼承父級(jí)元素的字體大小（默認(rèn)大小是16Px ）的2倍。場(chǎng)景2 :元素的w

12、idth:2em，這里默認(rèn)的字體大小是自身元素的字體大小，所以寬度是自身元素字體大小的2倍。4、rem :是相對(duì)于根元素html。這就意味著我們只需要設(shè)置根元素字體大小就可以把整個(gè)頁(yè)面進(jìn)行按比例調(diào)整。移動(dòng)端適配這種方法 挺常見(jiàn)的。5、 :百分比一般來(lái)說(shuō)都是相對(duì)于父級(jí)元素的。CSS的新單位：6 vw : view width的簡(jiǎn)寫。1vw代表瀏覽器視口寬度的1%。如：瀏覽器的寬度為1200px 那么1vw = 12px。7、vh : view height的簡(jiǎn)寫 1vh代表瀏覽器視口高度的1% 如瀏覽器高度900px -那么1vh = 9px。8、vmin :相對(duì)單位，當(dāng)前vw和vh中較小的一個(gè)

13、值其中較小的被分為100份。9、vmax :當(dāng)前vw和vh中較大的一個(gè)值。其中較大的值被分為100份。如瀏覽器視口大小為：1200*900px 那么1vmax = 900/100 = 1px。兼容性差，所以用的比擬少。vmin同理。cm、mm、in（英寸）、pt（點(diǎn)）、pc（派卡）這些單位在CSS中基本不怎么使用。九、如何實(shí)現(xiàn)0.5px邊框？實(shí)現(xiàn)方法有4種，分別為：利用縮小視覺(jué)上是0.5px。實(shí)現(xiàn)：給容器設(shè)置偽元素，設(shè)置絕對(duì)定位，寬高是200%，邊框?yàn)?px，然后縮小元素為50%，視覺(jué)上實(shí)現(xiàn)0.5px。特點(diǎn)：兼容性較好能夠使用圓角，推薦使用。利用線性漸變實(shí)現(xiàn)。實(shí)現(xiàn)：給容器設(shè)置偽元素設(shè)置絕對(duì)定位

14、,高度為1px 添加背景為線性漸變，一半有顏色,一半沒(méi)有顏色視覺(jué)上只有0.5px。特點(diǎn)：適合設(shè)置一條邊框，無(wú)法展示圓角。用陰影實(shí)現(xiàn)。實(shí)現(xiàn)：用陰影代替邊框設(shè)置陰影為：box-shadow: 0 0 0 0.5px #000。 特點(diǎn)：使用方便,也能夠正常展示圓角,但是兼容性一般。直接設(shè)置 box-width:0.5px 特點(diǎn)：使用方便，但是兼容性差。十、什么是響應(yīng)式圖像？在響應(yīng)式的流行下很多web應(yīng)用兼容手機(jī)平板電腦其中最頭疼的就是圖片了 不同平臺(tái)使用一張高清圖不但浪費(fèi)流量還影響加載速 度，所以就有了響應(yīng)式圖像，根據(jù)分辨率、設(shè)備像素比、屏幕方向等來(lái)加載合適的圖片，在保證圖片清晰的情況下，讓圖片盡可

15、能小。解決方案：,媒體查詢：該方案只適用于根據(jù)大小設(shè)置不同的背景圖片，對(duì)于動(dòng)態(tài)圖片，如banner和產(chǎn)品圖等處理起來(lái)顯的無(wú)能為力。srcset :可以設(shè)置通過(guò)不同的 DPR或者不同的屏幕分辨率選擇對(duì)應(yīng)的或者大小最接近的圖片。sizes :告訴瀏覽器圖片的實(shí)際顯示尺寸，html解析時(shí)瀏覽器能夠自動(dòng)算出需要請(qǐng)求的對(duì)應(yīng)圖片-、height 與 line-height 的區(qū)別接下來(lái)我們就細(xì)細(xì)分析下它們之間的區(qū)別有哪些？定義不同：line-height設(shè)置每行文字所占的高度 height元素自身的高度。就是你理解的行高和高度。同為高度時(shí),表示的意義不同。對(duì)于塊級(jí)元素，設(shè)置line-height時(shí)，高度會(huì)

16、被內(nèi)容自動(dòng)撐開(kāi)，此時(shí)高度就是行高和幾行內(nèi)容共同決定的， 即:height = line-height *行數(shù)而height設(shè)置的是一個(gè)固定值,與內(nèi)容無(wú)關(guān)。使用對(duì)象不同：line-height 一般是針對(duì)字體來(lái)設(shè)置 height與line-height相同時(shí)，文字會(huì)垂直居中 height是設(shè)置元素高度的。使用范圍不同：line-height針對(duì)有文字的任意元素- height針對(duì)塊級(jí)元素行級(jí)元素會(huì)失效。數(shù)值大小關(guān)系：line-height與height同時(shí)設(shè)置時(shí)它們之間的大小關(guān)系,對(duì)布局的影響：line-height = height時(shí)，單行文字居中,多行文本會(huì)超出元素范圍或line-heigh

17、t height時(shí)文本會(huì)溢出元素范圍。十二、CSS繪制三角形繪制三角形在工程中非常常見(jiàn)，總是記不住繪制的時(shí)候到底哪個(gè)是有顏色的其他的透明今天給大家總結(jié)一個(gè)規(guī)律。F圖是一個(gè)大小為0，設(shè)置了四個(gè)不同顏色的邊框的正方形:可以歸納出：方向朝下的三角形，上邊框有顏色,其他三個(gè)邊框?yàn)橥该魃?。方向朝上的三角形，下邊框有顏色，其他三個(gè)邊框?yàn)橥该魃?。方向朝左的三角形，右邊框有顏色，其他三個(gè)邊框?yàn)橥该魃７较虺业娜切?，左邊框有顏色，其他三個(gè)邊框?yàn)橥该魃：?jiǎn)單點(diǎn)就是：朝下上有，朝上下有，朝右左有，朝左右有。十三、移動(dòng)端如何適配？關(guān)于移動(dòng)端適配的常見(jiàn)方案：媒體查詢的方式即css3的media。flex或grid的彈性布局。viewport 縮放動(dòng)態(tài)rem方式vw適配方案適配方案比照：1、媒體查詢?cè)摲绞奖葦M老要寫很多的樣式寫起來(lái)麻煩還不好用，基本沒(méi)人用了。2、