關(guān)于css面試題及答案

一、單項(xiàng)選擇題（每題2分，共10題）1.CSS中設(shè)置元素字體大小的屬性是（）A.font-styleB.font-weightC.font-sizeD.font-family2.以下哪個(gè)選擇器用于選取所有`<p>`元素（）A.pB.pC..pD.p3.元素的定位屬性值為`relative`時(shí)，是相對(duì)于（）定位A.瀏覽器窗口B.父元素C.正常位置D.文檔起始位置4.設(shè)置元素的背景顏色，使用的屬性是（）A.background-imageB.background-colorC.background-repeatD.background-position5.要使一個(gè)元素隱藏，以下哪種方法正確（）A.display:noneB.visibility:hiddenC.opacity:0D.以上都可以6.CSS中盒模型的組成部分不包括（）A.contentB.paddingC.marginD.border-radius7.以下哪個(gè)單位表示相對(duì)長(zhǎng)度單位（）A.pxB.cmC.emD.mm8.為元素添加鼠標(biāo)懸停效果，使用的偽類(lèi)是（）A.:activeB.:hoverC.:visitedD.:link9.以下哪種方式可以清除浮動(dòng)（）A.clear:leftB.clear:rightC.clear:bothD.clear:none10.若要將元素的寬度設(shè)置為自適應(yīng)，應(yīng)該使用（）A.width:autoB.width:100%C.width:inheritD.width:initial答案：1.C2.A3.C4.B5.D6.D7.C8.B9.C10.A二、多項(xiàng)選擇題（每題2分，共10題）1.以下屬于CSS布局方式的有（）A.浮動(dòng)布局B.定位布局C.彈性布局（Flexbox）D.網(wǎng)格布局（Grid）2.可以設(shè)置元素邊框樣式的屬性有（）A.border-widthB.border-styleC.border-colorD.border-radius3.以下哪些屬性可以用于控制文本的對(duì)齊方式（）A.text-alignB.justify-contentC.align-itemsD.vertical-align4.關(guān)于CSS選擇器，以下說(shuō)法正確的有（）A.元素選擇器可以選中頁(yè)面中所有該元素B.類(lèi)選擇器以`.`開(kāi)頭C.ID選擇器以``開(kāi)頭D.屬性選擇器可以根據(jù)元素的屬性來(lái)選取元素5.以下哪些值可以作為`display`屬性的值（）A.blockB.inlineC.inline-blockD.none6.能設(shè)置元素字體樣式的屬性有（）A.font-familyB.font-sizeC.font-weightD.font-style7.以下屬于CSS動(dòng)畫(huà)相關(guān)屬性的有（）A.animationB.transitionC.transformD.keyframes8.當(dāng)設(shè)置`position`屬性值為`fixed`時(shí)，元素具有以下特點(diǎn)（）A.相對(duì)于瀏覽器窗口定位B.滾動(dòng)頁(yè)面時(shí)元素位置不變C.脫離文檔流D.會(huì)保留在文檔流中的位置9.以下哪些屬性可以改變?cè)氐耐该鞫龋ǎ〢.opacityB.filterC.visibilityD.z-index10.以下哪些情況會(huì)觸發(fā)CSS重排（）A.改變?cè)氐膶挾菳.改變?cè)氐淖煮w大小C.顯示或隱藏元素D.改變?cè)氐谋尘邦伾鸢福?.ABCD2.ABC3.AD4.ABCD5.ABCD6.ABCD7.ABC8.ABC9.AB10.ABC三、判斷題（每題2分，共10題）1.CSS只能應(yīng)用于HTML頁(yè)面。（）2.類(lèi)選擇器在HTML中可以被多個(gè)元素使用。（）3.設(shè)置`margin:0auto`可以使元素在水平方向上居中。（）4.`z-index`屬性值越大，元素越在底層顯示。（）5.`background-image`屬性只能設(shè)置一張背景圖片。（）6.浮動(dòng)元素會(huì)脫離文檔流。（）7.`font-weight`屬性值只能是`normal`和`bold`。（）8.偽元素和偽類(lèi)一樣，都是以`:`開(kāi)頭。（）9.使用`transform`屬性不會(huì)觸發(fā)重排，只會(huì)觸發(fā)重繪。（）10.`max-width`屬性設(shè)置的是元素的最大寬度，不能超過(guò)這個(gè)值。（）答案：1.×2.√3.√4.×5.×6.√7.×8.×9.√10.√四、簡(jiǎn)答題（每題5分，共4題）1.簡(jiǎn)述CSS盒模型的組成及作用。答案：盒模型由content（內(nèi)容區(qū)）、padding（內(nèi)邊距）、border（邊框）、margin（外邊距）組成。內(nèi)容區(qū)存放元素實(shí)際內(nèi)容，內(nèi)邊距在內(nèi)容與邊框間形成空間，邊框圍繞內(nèi)容和內(nèi)邊距，外邊距在元素與其他元素間形成空間。2.說(shuō)說(shuō)`display:none`和`visibility:hidden`的區(qū)別。答案：`display:none`使元素完全不顯示，不占據(jù)空間，元素及其后代都不渲染；`visibility:hidden`元素隱藏，但仍占據(jù)空間，其后代若`visibility`設(shè)為`visible`可顯示。3.如何實(shí)現(xiàn)一個(gè)水平垂直居中的元素？答案：對(duì)于行內(nèi)元素，可設(shè)置父元素`text-align:center`和`line-height`等于父元素高度；對(duì)于塊級(jí)元素，用`flex`布局，父元素設(shè)`display:flex;justify-content:center;align-items:center`。絕對(duì)定位元素可`top:50%;left:50%;transform:translate(-50%,-50%)`。4.解釋CSS中的繼承性。答案：CSS繼承性指某些屬性值會(huì)自動(dòng)從父元素傳遞給子元素，如`font`相關(guān)屬性、`color`等。這樣在設(shè)置頁(yè)面樣式時(shí)，可減少重復(fù)代碼，方便統(tǒng)一風(fēng)格，但并非所有屬性都具有繼承性。五、討論題（每題5分，共4題）1.在響應(yīng)式設(shè)計(jì)中，CSS媒體查詢的作用及應(yīng)用場(chǎng)景有哪些？答案：媒體查詢能根據(jù)不同設(shè)備的屏幕尺寸、分辨率等特性應(yīng)用不同CSS樣式。應(yīng)用場(chǎng)景如為不同屏幕寬度的設(shè)備調(diào)整布局，在手機(jī)上設(shè)置單列布局，平板和電腦上設(shè)置多列布局；根據(jù)屏幕分辨率調(diào)整圖像清晰度等，優(yōu)化用戶體驗(yàn)。2.討論CSS預(yù)處理器（如Sass、Less）的優(yōu)缺點(diǎn)。答案：優(yōu)點(diǎn)是可使用變量、嵌套、混入等，提高代碼可維護(hù)性與復(fù)用性，減少重復(fù)代碼；缺點(diǎn)是增加學(xué)習(xí)成本，需要額外編譯步驟，若項(xiàng)目小可能增加復(fù)雜性，且不同預(yù)處理器語(yǔ)法有差異。3.說(shuō)說(shuō)在CSS中優(yōu)化性能的方法。答案：避免使用內(nèi)聯(lián)樣式；減少選擇器的層級(jí)深度；合理使用類(lèi)選擇器，避免過(guò)度使用ID選擇器；避免使用通配符選擇器；壓縮CSS代碼；優(yōu)化動(dòng)畫(huà)，使用`transform`