2025年css考試題及答案一、單項(xiàng)選擇題（每題2分，共20分）1.以下關(guān)于CSS選擇器優(yōu)先級(jí)的描述，正確的是（）A.內(nèi)聯(lián)樣式>ID選擇器>類選擇器>標(biāo)簽選擇器B.類選擇器>偽類選擇器>屬性選擇器C.通配符選擇器（）的優(yōu)先級(jí)高于標(biāo)簽選擇器D.相鄰兄弟選擇器（+）的優(yōu)先級(jí)由所關(guān)聯(lián)的選擇器決定答案：A解析：CSS優(yōu)先級(jí)遵循“內(nèi)聯(lián)樣式（1000）>ID選擇器（100）>類/偽類/屬性選擇器（10）>標(biāo)簽/偽元素選擇器（1）”的規(guī)則；偽類與類選擇器優(yōu)先級(jí)相同；通配符選擇器優(yōu)先級(jí)為0；相鄰兄弟選擇器本身不影響優(yōu)先級(jí)，優(yōu)先級(jí)由其關(guān)聯(lián)的選擇器組合決定。2.已知元素樣式為`box-sizing:border-box;width:200px;padding:10px;border:2pxsolid000;`，其內(nèi)容區(qū)域的寬度是（）A.200pxB.176pxC.180pxD.196px答案：B解析：`border-box`模式下，元素總寬度（width屬性值）包含內(nèi)容區(qū)、內(nèi)邊距和邊框。計(jì)算公式為：內(nèi)容區(qū)寬度=widthpadding2border2=20010222=176px。3.以下Flex屬性中，用于定義彈性容器主軸方向的是（）A.`flex-wrap`B.`flex-direction`C.`justify-content`D.`align-items`答案：B解析：`flex-direction`決定主軸方向（row/row-reverse/column/column-reverse）；`flex-wrap`控制換行；`justify-content`定義主軸對(duì)齊方式；`align-items`定義交叉軸對(duì)齊方式。4.關(guān)于偽元素`::before`和`::after`，以下說(shuō)法錯(cuò)誤的是（）A.必須通過(guò)`content`屬性定義內(nèi)容（即使內(nèi)容為空）B.提供的元素屬于行內(nèi)元素，無(wú)法設(shè)置寬高C.可以通過(guò)`display:block`轉(zhuǎn)換為塊級(jí)元素D.會(huì)被屏幕閱讀器讀取，需注意無(wú)障礙性答案：B解析：偽元素默認(rèn)是行內(nèi)元素，但通過(guò)`display`屬性可轉(zhuǎn)換為塊級(jí)或行內(nèi)塊級(jí)，此時(shí)可設(shè)置寬高；`content`為必需屬性（值可為空字符串`""`）；部分屏幕閱讀器會(huì)忽略偽元素內(nèi)容，需謹(jǐn)慎使用。5.觸發(fā)BFC（塊格式化上下文）的方式不包括（）A.`float`屬性值不為`none`B.`position`為`absolute`或`fixed`C.`overflow`屬性值為`visible`D.`display`為`inline-block`答案：C解析：BFC的觸發(fā)條件包括：`float`非`none`、`position`為`absolute`/`fixed`、`overflow`非`visible`（如`hidden`/`auto`）、`display`為`inline-block`/`table-cell`等；`overflow:visible`不會(huì)觸發(fā)BFC。6.以下關(guān)于層疊上下文（StackingContext）的描述，正確的是（）A.根元素（HTML）默認(rèn)不形成層疊上下文B.`z-index:auto`的定位元素會(huì)創(chuàng)建層疊上下文C.層疊上下文中的元素按`z-index`值在局部層級(jí)中排序D.非定位元素的`z-index`屬性有效答案：C解析：根元素（HTML）默認(rèn)創(chuàng)建層疊上下文；`z-index`為數(shù)值（非`auto`）的定位元素才會(huì)創(chuàng)建層疊上下文；非定位元素的`z-index`無(wú)效；層疊上下文中的元素在局部層級(jí)內(nèi)按`z-index`排序，與其他層疊上下文獨(dú)立。7.若要為容器設(shè)置基于自身寬度的響應(yīng)式布局，應(yīng)使用（）A.媒體查詢（MediaQuery）B.容器查詢（ContainerQuery）C.視口單位（vh/vw）D.彈性布局（Flexbox）答案：B解析：容器查詢（@container）可基于容器自身的尺寸（如寬度、高度）觸發(fā)樣式變化，適用于組件級(jí)響應(yīng)式布局；媒體查詢基于視口尺寸，適用于頁(yè)面級(jí)響應(yīng)；視口單位和彈性布局不直接解決容器內(nèi)的響應(yīng)問(wèn)題。8.以下CSS變量（CustomProperties）的聲明和使用，正確的是（）A.`:root{--main-color:ff0000;}.box{color:var(--main-color);}`B.`body{-main-color:00ff00;}.text{color:var(-main-color);}`C.`:root{main-color:0000ff;}.title{color:var(main-color);}`D.`html{--accent:16px;}.item{font-size:var(--accent,14px);}`答案：D解析：CSS變量需以`--`開(kāi)頭（如`--main-color`）；`var()`函數(shù)可設(shè)置備用值（如`var(--accent,14px)`）；選項(xiàng)A未設(shè)置備用值但語(yǔ)法正確，但D同時(shí)正確且更全面；B的變量名缺少`--`，C未使用`--`聲明，均錯(cuò)誤。9.關(guān)于CSSGrid的子grid（subgrid）特性，以下描述錯(cuò)誤的是（）A.子grid元素需設(shè)置`grid-template-columns:subgrid`B.子grid會(huì)繼承父grid的軌道尺寸和對(duì)齊方式C.子grid適用于嵌套網(wǎng)格的布局統(tǒng)一D.子grid僅支持列方向（columns），不支持行方向（rows）答案：D解析：子grid（subgrid）支持同時(shí)繼承父grid的行和列軌道（需分別設(shè)置`grid-template-rows:subgrid`和`grid-template-columns:subgrid`），用于嵌套網(wǎng)格保持與父網(wǎng)格的軌道一致性；其語(yǔ)法要求顯式聲明`subgrid`，并繼承父網(wǎng)格的軌道定義。10.以下濾鏡（Filter）屬性中，用于調(diào)整元素亮度的是（）A.`filter:contrast(200%);`B.`filter:brightness(150%);`C.`filter:saturate(50%);`D.`filter:grayscale(100%);`答案：B解析：`brightness()`調(diào)整亮度（100%為正常，小于100%變暗，大于變亮）；`contrast()`調(diào)整對(duì)比度，`saturate()`調(diào)整飽和度，`grayscale()`轉(zhuǎn)換為灰度。二、填空題（每題3分，共15分）1.若要使元素在水平和垂直方向均居中于父容器，且父容器為Flex容器，應(yīng)設(shè)置父容器的`justify-content`為_(kāi)_____，`align-items`為_(kāi)_____。答案：center；center2.CSS中，使用`calc()`函數(shù)計(jì)算元素寬度時(shí)，運(yùn)算符兩側(cè)必須有______（填寫“空格”或“無(wú)空格”）。答案：空格3.Grid布局中，`grid-template-columns:repeat(3,1fr2fr)`會(huì)提供______個(gè)列軌道，每個(gè)軌道的寬度比例為_(kāi)_____。答案：6；1:2:1:2:1:24.媒體查詢中，若要匹配屏幕寬度在768px到1024px之間的設(shè)備，應(yīng)使用______。答案：`@media(min-width:768px)and(max-width:1024px)`5.CSS動(dòng)畫中，`@keyframes`規(guī)則定義動(dòng)畫關(guān)鍵幀，若要讓動(dòng)畫無(wú)限循環(huán)播放，需設(shè)置`animation-iteration-count`為_(kāi)_____。答案：infinite三、簡(jiǎn)答題（每題10分，共30分）1.簡(jiǎn)述Flex布局中`flex:1`的完整展開(kāi)形式及其作用。答案：`flex:1`是`flex-grow:1`、`flex-shrink:1`、`flex-basis:0%`的簡(jiǎn)寫。其中，`flex-grow`定義彈性項(xiàng)的擴(kuò)展比例（1表示按比例分配剩余空間），`flex-shrink`定義收縮比例（1表示按比例收縮），`flex-basis:0%`表示初始主尺寸為0（使剩余空間完全由擴(kuò)展比例決定）。該屬性組合常用于讓彈性項(xiàng)平均分配容器空間。2.說(shuō)明BFC（塊格式化上下文）的特性及其在布局中的常見(jiàn)應(yīng)用場(chǎng)景。答案：BFC的特性包括：內(nèi)部元素按文檔流排列，垂直邊距合并僅發(fā)生在BFC內(nèi)部；BFC不會(huì)與浮動(dòng)元素重疊；BFC的高度會(huì)包含其內(nèi)部的浮動(dòng)元素。應(yīng)用場(chǎng)景包括：解決浮動(dòng)元素導(dǎo)致的父容器高度塌陷（通過(guò)為父容器觸發(fā)BFC）；防止相鄰塊級(jí)元素的垂直邊距合并（將其中一個(gè)元素包裹在BFC容器中）；實(shí)現(xiàn)兩欄/多欄布局（左側(cè)浮動(dòng)，右側(cè)觸發(fā)BFC避免重疊）。3.比較CSS媒體查詢（MediaQuery）與容器查詢（ContainerQuery）的適用場(chǎng)景，并舉例說(shuō)明。答案：媒體查詢基于視口（Viewport）的尺寸（如屏幕寬度、設(shè)備類型）調(diào)整樣式，適用于頁(yè)面級(jí)的響應(yīng)式設(shè)計(jì)（例如，當(dāng)視口寬度小于768px時(shí)，將導(dǎo)航欄從橫向改為縱向）。容器查詢基于特定容器（Container）自身的尺寸調(diào)整內(nèi)部元素樣式，適用于組件級(jí)的響應(yīng)式設(shè)計(jì)（例如，一個(gè)卡片組件，當(dāng)容器寬度小于300px時(shí)，隱藏卡片的副標(biāo)題；寬度大于300px時(shí)顯示副標(biāo)題）。兩者結(jié)合可實(shí)現(xiàn)更精細(xì)的響應(yīng)式布局，如頁(yè)面整體適應(yīng)視口，組件內(nèi)部適應(yīng)自身容器。四、綜合題（第1題20分，第2題15分，共35分）1.請(qǐng)使用CSSGrid實(shí)現(xiàn)一個(gè)響應(yīng)式網(wǎng)格布局，要求：網(wǎng)格包含4個(gè)項(xiàng)目（item），默認(rèn)每行顯示4列；當(dāng)容器寬度小于1024px時(shí)，每行顯示3列；當(dāng)容器寬度小于768px時(shí)，每行顯示2列；當(dāng)容器寬度小于576px時(shí)，每行顯示1列；項(xiàng)目之間的間距為20px；項(xiàng)目高度為150px，背景色為f0f0f0，圓角8px。答案：```css.container{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc((100%60px)/4),1fr));/默認(rèn)4列，間距20px，總間距（4-1）20=60px/gap:20px;}/容器查詢：基于容器寬度調(diào)整列數(shù)/@container(max-width:1023px){.container{grid-template-columns:repeat(auto-fill,minmax(calc((100%40px)/3),1fr));/3列，間距(3-1)20=40px/}}@container(max-width:767px){.container{grid-template-columns:repeat(auto-fill,minmax(calc((100%20px)/2),1fr));/2列，間距(2-1)20=20px/}}@container(max-width:575px){.container{grid-template-columns:1fr;/1列/}}/項(xiàng)目樣式/.item{height:150px;background:f0f0f0;border-radius:8px;}```關(guān)鍵點(diǎn)說(shuō)明：使用`grid-template-columns:repeat(auto-fill,minmax(...))`實(shí)現(xiàn)自動(dòng)填充列；通過(guò)容器查詢（@container）根據(jù)容器寬度調(diào)整`minmax`的最小值，計(jì)算不同列數(shù)下的最小軌道寬度（總寬度減去間距后按列數(shù)均分）；`gap:20px`統(tǒng)一設(shè)置項(xiàng)目間距；容器需顯式設(shè)置`container-type:inline-size`以啟用基于寬度的容器查詢（實(shí)際代碼中需在容器樣式中添加`container-type:inline-size`）。2.請(qǐng)使用Flex布局和偽元素實(shí)現(xiàn)一個(gè)導(dǎo)航欄，要求：導(dǎo)航項(xiàng)水平排列，間距30px；鼠標(biāo)懸停時(shí)，導(dǎo)航項(xiàng)下方出現(xiàn)從左到右延伸的下劃線動(dòng)畫（下劃線初始寬度為0，最終寬度等于導(dǎo)航項(xiàng)文本寬度）；導(dǎo)航項(xiàng)默認(rèn)顏色為333，懸停時(shí)顏色為2563eb；下劃線顏色為2563eb，高度為2px，動(dòng)畫時(shí)長(zhǎng)0.3s，緩動(dòng)函數(shù)為ease-in-out。答案：```css.nav{display:flex;gap:30px;/導(dǎo)航項(xiàng)間距/padding:20px;}.nav-item{position:relative;/為偽元素定位/color:333;text-decoration:none;tra