2025年css考試題及答案一、單項(xiàng)選擇題（每題2分，共20分）1.以下CSS選擇器中，優(yōu)先級(jí)最高的是？A.div.nav>p::first-lineB.main-content.activeC.[data-type="primary"]:hoverD.bodysection:nth-child(2)2.已知一個(gè)元素設(shè)置為`width:300px;padding:15px;border:5pxsolid000;box-sizing:border-box;`，其內(nèi)容區(qū)域的實(shí)際寬度是？A.300pxB.270pxC.260pxD.280px3.以下Flex容器屬性中，用于控制項(xiàng)目在交叉軸對(duì)齊方式的是？A.justify-contentB.align-itemsC.flex-wrapD.gap4.若Grid容器設(shè)置`grid-template-columns:repeat(auto-fill,minmax(200px,1fr));`，且容器寬度為800px，最終會(huì)提供多少個(gè)軌道？A.3B.4C.5D.65.以下哪個(gè)偽類可以正確選中“包含class為‘icon’的子元素的div”？A.div:has(.icon)B.div:contains(.icon)C.div:includes(.icon)D.div:child(.icon)6.以下哪種情況不會(huì)觸發(fā)BFC（塊級(jí)格式化上下文）？A.元素的`float`屬性值為`left`B.元素的`overflow`屬性值為`visible`C.元素的`display`屬性值為`inline-block`D.元素的`position`屬性值為`absolute`7.關(guān)于CSS變量（CustomProperties），以下描述錯(cuò)誤的是？A.變量名需以`--`開頭B.變量作用域僅限于定義它的選擇器及其子元素C.可以通過`var()`函數(shù)調(diào)用，支持默認(rèn)值D.變量值可以繼承，子元素未定義時(shí)會(huì)繼承父元素的變量8.容器查詢（ContainerQueries）中，用于指定查詢?nèi)萜鞒叽绲恼Z(yǔ)法是？A.@media(min-width:600px)B.@container(min-width:600px)C.@supports(container-type:inline-size)D.@layercontainer(min-width:600px)9.CSS邏輯屬性中，`margin-inline-start`對(duì)應(yīng)的物理屬性是？A.margin-topB.margin-rightC.margin-bottomD.margin-left10.以下哪個(gè)屬性不會(huì)創(chuàng)建層疊上下文（StackingContext）？A.`position:fixed`B.`opacity:0.8`C.`transform:rotate(30deg)`D.`z-index:auto`二、填空題（每題3分，共15分）1.Flex項(xiàng)目的默認(rèn)`flex-grow`值為______，`flex-shrink`值為______，`flex-basis`值為______。2.Grid布局中，`grid-auto-flow`的默認(rèn)值為______，表示項(xiàng)目按______方向依次填充軌道。3.媒體查詢中，“當(dāng)視口寬度小于等于768px時(shí)應(yīng)用樣式”的語(yǔ)法是______。4.CSS動(dòng)畫中，定義從透明度0到1的關(guān)鍵幀代碼為：`@keyframesfadeIn{______}`。5.BFC的布局規(guī)則包括：浮動(dòng)元素不會(huì)溢出BFC容器；______；______。三、簡(jiǎn)答題（每題10分，共30分）1.請(qǐng)對(duì)比Flex布局與Grid布局的核心差異，并說(shuō)明各自適用的場(chǎng)景。2.響應(yīng)式設(shè)計(jì)的核心目標(biāo)是什么？列舉至少4種實(shí)現(xiàn)響應(yīng)式布局的常用技術(shù)手段。3.簡(jiǎn)述CSS層疊（Cascade）規(guī)則的優(yōu)先級(jí)順序（從高到低），并說(shuō)明“特殊性（Specificity）”的計(jì)算方法。四、綜合題（第1題20分，第2題15分，共35分）1.請(qǐng)使用Grid布局實(shí)現(xiàn)一個(gè)響應(yīng)式卡片列表，要求：-卡片寬度最小250px，最大1fr；-大視口（≥1200px）時(shí)顯示4列，中視口（768px≤寬度<1200px）顯示3列，小視口（<768px）顯示1列；-卡片間距為20px；-每張卡片包含圖片（高度200px，內(nèi)容自適應(yīng)）、標(biāo)題（字體大小1.2rem）和描述（字體大小0.9rem，顏色666）；-卡片添加`box-shadow:02px8pxrgba(0,0,0,0.1)`。請(qǐng)寫出對(duì)應(yīng)的HTML結(jié)構(gòu)和CSS代碼。2.請(qǐng)使用Flex布局和CSS變量實(shí)現(xiàn)一個(gè)主題切換組件，要求：-包含“淺色模式”和“深色模式”兩個(gè)切換按鈕；-按鈕水平排列，間距10px；-淺色模式下，頁(yè)面背景為f5f5f5，文字顏色為333，按鈕背景為fff；-深色模式下，頁(yè)面背景為1a1a1a，文字顏色為fff，按鈕背景為333；-點(diǎn)擊按鈕時(shí)切換主題，且刷新頁(yè)面后保持最后選擇的主題狀態(tài)。請(qǐng)寫出HTML結(jié)構(gòu)、CSS樣式（需包含CSS變量定義）及關(guān)鍵JavaScript邏輯。答案一、單項(xiàng)選擇題1.B（ID選擇器優(yōu)先級(jí)最高，main-content為ID選擇器，特殊性為1,0,0；A為元素+類+偽元素，特殊性0,1,2；C為屬性+偽類，特殊性0,1,1；D為元素+偽類，特殊性0,0,2）2.A（`box-sizing:border-box`時(shí)，width包含內(nèi)容、padding和border，因此內(nèi)容寬度=300px-15px2-5px2？不，box-sizing:border-box的width是總寬度，內(nèi)容寬度=width-padding-border，即300-30-10=260px？原題計(jì)算錯(cuò)誤，正確應(yīng)為C。原解析錯(cuò)誤，正確答案應(yīng)為C）（注：原計(jì)算錯(cuò)誤，正確步驟：總寬度=內(nèi)容寬度+padding2+border2。當(dāng)box-sizing:border-box時(shí)，width屬性控制總寬度。因此內(nèi)容寬度=width-padding2-border2=300-30-10=260px，選C）3.B（align-items控制交叉軸對(duì)齊，justify-content控制主軸對(duì)齊）4.B（容器寬度800px，每個(gè)軌道最小200px，800/200=4，因此提供4個(gè)軌道）5.A（:has()是CSSLevel4新增的關(guān)系偽類，用于匹配包含特定子元素的元素）6.B（overflow:visible不會(huì)觸發(fā)BFC，其他選項(xiàng)均為BFC觸發(fā)條件）7.B（CSS變量作用域是級(jí)聯(lián)的，子元素可繼承父元素變量，未定義時(shí)繼承最近祖先的變量）8.B（容器查詢使用@container語(yǔ)法，指定容器尺寸條件）9.D（邏輯屬性margin-inline-start對(duì)應(yīng)水平方向的起始邊，即物理屬性的margin-left）10.D（z-index:auto不會(huì)創(chuàng)建層疊上下文，只有z-index為具體數(shù)值時(shí)才會(huì)）二、填空題1.0；1；auto2.row；行（水平）3.@media(max-width:768px)4.from{opacity:0;}to{opacity:1;}（或0%{opacity:0;}100%{opacity:1;}）5.塊級(jí)元素垂直邊距在BFC內(nèi)合并；BFC區(qū)域與浮動(dòng)元素不會(huì)重疊三、簡(jiǎn)答題1.核心差異：Flex是一維布局模型（僅控制行或列方向），Grid是二維布局模型（同時(shí)控制行和列）。適用場(chǎng)景：Flex適合線性排列（如導(dǎo)航欄、按鈕組）；Grid適合復(fù)雜網(wǎng)格結(jié)構(gòu)（如儀表板、圖片墻）。2.核心目標(biāo)：使頁(yè)面在不同設(shè)備（屏幕尺寸、分辨率）上呈現(xiàn)良好的視覺效果和可用性。常用技術(shù)：媒體查詢（@media）、彈性布局（Flex/Grid）、相對(duì)單位（rem/em）、容器查詢（@container）、圖片適配（srcset/sizes）。3.層疊優(yōu)先級(jí)（從高到低）：!important聲明>行內(nèi)樣式（style屬性）>ID選擇器>類/屬性/偽類選擇器>元素/偽元素選擇器>通配符（）。特殊性計(jì)算：用四元組(a,b,c,d)表示，a為行內(nèi)樣式數(shù)量（0或1），b為ID選擇器數(shù)量，c為類/屬性/偽類數(shù)量，d為元素/偽元素?cái)?shù)量，數(shù)值越大優(yōu)先級(jí)越高。四、綜合題1.HTML與CSS代碼：```html<divclass="card-container"><divclass="card"><imgsrc="placeholder.jpg"alt="卡片圖片"class="card-img"><h3class="card-title">卡片標(biāo)題</h3><pclass="card-desc">卡片描述內(nèi)容，用于展示具體信息。</p></div><!--重復(fù)2-3個(gè)card元素--></div><style>.card-container{display:grid;padding:20px;gap:20px;}.card{background:fff;box-shadow:02px8pxrgba(0,0,0,0.1);border-radius:8px;overflow:hidden;}.card-img{width:100%;height:200px;object-fit:cover;}.card-title{padding:15px15px0;font-size:1.2rem;margin:0;}.card-desc{padding:10px15px15px;font-size:0.9rem;color:666;margin:0;}/響應(yīng)式調(diào)整列數(shù)/@media(min-width:1200px){.card-container{grid-template-columns:repeat(4,minmax(250px,1fr));}}@media(min-width:768px)and(max-width:1199px){.card-container{grid-template-columns:repeat(3,minmax(250px,1fr));}}@media(max-width:767px){.card-container{grid-template-columns:1fr;}}</style>```2.HTML、CSS與JavaScript代碼：```html<divclass="theme-container"><divclass="theme-content"><h1>主題切換示例</h1><p>這是一段測(cè)試文本，顏色隨主題變化。</p></div><divclass="theme-buttons"><buttonclass="theme-btn"data-theme="light">淺色模式</button><buttonclass="theme-btn"data-theme="dark">深色模式</button></div></div><style>:root{/淺色模式默認(rèn)變量/--bg-color:f5f5f5;--text-color:333;--btn-bg:fff;}.dark-theme{/深色模式變量覆蓋/--bg-color:1a1a1a;--text-color:fff;--btn-bg:333;}.theme-container{min-height:100vh;padding:20px;background-color:var(--bg-color);color:var(--text-color);transition:all0.3s;}.theme-buttons{display:flex;gap:10px;margin-top:20px;}.theme-btn{padding: