2025年htmlcss考試題及答案一、單項(xiàng)選擇題（每題2分，共20分）1.以下哪個(gè)HTML標(biāo)簽最適合包裹一篇新聞報(bào)道的正文內(nèi)容？A.`<div>`B.`<section>`C.`<article>`D.`<main>`答案：C解析：`<article>`用于獨(dú)立可復(fù)用的內(nèi)容，如新聞文章；`<main>`表示文檔主要內(nèi)容，通常唯一；`<section>`用于主題分組；`<div>`無(wú)語(yǔ)義。2.關(guān)于CSS盒模型，以下描述正確的是？A.標(biāo)準(zhǔn)盒模型的width僅包含內(nèi)容區(qū)B.border-box的width包含內(nèi)容、內(nèi)邊距和邊框C.margin屬于盒模型的組成部分但不影響布局D.padding可以設(shè)置負(fù)值答案：B解析：標(biāo)準(zhǔn)盒模型width=內(nèi)容區(qū)寬度；border-box的width=內(nèi)容+內(nèi)邊距+邊框；margin影響元素間距；padding不可為負(fù)。3.若要實(shí)現(xiàn)“當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，按鈕背景色從紅色漸變到藍(lán)色，耗時(shí)0.3秒”，應(yīng)使用以下哪組CSS屬性？A.`transition:background-color0.3s;:hover{background:linear-gradient(red,blue);}`B.`animation:colorChange0.3s;:hover{animation-play-state:running;}`C.`transition:background0.3s;:hover{background:linear-gradient(red,blue);}`D.`background:linear-gradient(red,blue);transition:all0.3s;`答案：C解析：transition需指定要過(guò)渡的屬性（background包含顏色和漸變），直接修改background屬性觸發(fā)過(guò)渡；A錯(cuò)誤在于未包含漸變屬性；B使用animation需定義關(guān)鍵幀；D未在懸停時(shí)修改屬性。4.以下哪個(gè)選擇器優(yōu)先級(jí)最高？A.`.nav-item.active`B.`headerdivp`C.`div.nav>p`D.`p:first-child`答案：B解析：ID選擇器（header）權(quán)重為100，B選項(xiàng)包含1個(gè)ID、2個(gè)元素選擇器，總權(quán)重100+0+0=100；A為2個(gè)類選擇器（10+10=20）；C為1個(gè)類+2個(gè)元素（10+0+0=10）；D為1個(gè)偽類+1個(gè)元素（10+0=10）。5.關(guān)于Flex布局，以下說(shuō)法錯(cuò)誤的是？A.`flex:1`等價(jià)于`flex-grow:1;flex-shrink:1;flex-basis:0%`B.`align-items`控制交叉軸對(duì)齊，`justify-content`控制主軸對(duì)齊C.子元素的`float`屬性在Flex容器中會(huì)失效D.`flex-wrap:wrap-reverse`會(huì)改變主軸方向答案：D解析：`flex-wrap`控制換行方向，不改變主軸方向（由`flex-direction`決定）；其他選項(xiàng)均正確。6.要讓一個(gè)div在父容器中水平垂直居中，且父容器高度不確定，最優(yōu)方案是？A.`position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);`B.`margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;`C.`display:flex;justify-content:center;align-items:center;`（父容器樣式）D.`text-align:center;line-height:父容器高度;`（div為行內(nèi)塊元素）答案：C解析：父容器使用Flex布局是最簡(jiǎn)潔且無(wú)需依賴定位的方案；A需要父容器`position:relative`；B需父容器有明確高度；D依賴固定高度。7.以下哪個(gè)meta標(biāo)簽可實(shí)現(xiàn)移動(dòng)端頁(yè)面適配？A.`<metaname="viewport"content="width=device-width,initial-scale=2.0">`B.`<metaname="viewport"content="width=device-width,user-scalable=no">`C.`<metaname="keywords"content="移動(dòng)端,適配">`D.`<metahttp-equiv="X-UA-Compatible"content="IE=edge">`答案：B解析：B選項(xiàng)禁止用戶縮放，初始縮放為1.0（默認(rèn)）；A的initial-scale=2.0會(huì)放大頁(yè)面；C為關(guān)鍵詞標(biāo)簽；D用于IE兼容模式。8.CSS變量的正確聲明方式是？A.`:root{--main-color:ff0000;}`B.`body{$main-color:ff0000;}`C.`html{var-main-color:ff0000;}`D.`:root{main-color:ff0000;}`答案：A解析：CSS變量以`--`開頭，通常在`:root`（文檔根元素）聲明；B為Sass語(yǔ)法；C變量名格式錯(cuò)誤；D缺少`--`前綴。9.關(guān)于Grid布局，以下屬性與描述不匹配的是？A.`grid-template-columns:repeat(auto-fill,minmax(200px,1fr))`——自動(dòng)填充列，每列最小200px，最大占滿剩余空間B.`grid-auto-rows:150px`——隱式創(chuàng)建的行高度為150pxC.`gap:20px`——行和列之間的間距為20pxD.`justify-items:start`——控制網(wǎng)格項(xiàng)在交叉軸的對(duì)齊方式答案：D解析：`justify-items`控制主軸對(duì)齊（水平方向），交叉軸對(duì)齊用`align-items`。10.以下哪種情況不會(huì)觸發(fā)BFC（塊格式化上下文）？A.元素設(shè)置`float:left`B.元素設(shè)置`position:absolute`C.元素設(shè)置`overflow:visible`D.元素設(shè)置`display:inline-block`答案：C解析：BFC觸發(fā)條件包括float非none、position為absolute/fixed、overflow非visible、display為inline-block/flex等；overflow:visible不觸發(fā)。二、填空題（每空2分，共20分）1.HTML5新增的語(yǔ)義化標(biāo)簽中，用于定義頁(yè)面主導(dǎo)航的是______，定義側(cè)邊欄內(nèi)容的是______。答案：`<nav>`，`<aside>`2.CSS中清除浮動(dòng)的常用方法有______（寫出兩種）。答案：父元素設(shè)置`overflow:auto/hidden`；使用`clear:both`的空div；父元素使用`display:flow-root`3.媒體查詢中，`@media(max-width:768px)`表示當(dāng)視口寬度______時(shí)生效，`orientation:portrait`表示設(shè)備處于______模式。答案：小于等于768px；縱向（豎屏）4.若要讓CSS動(dòng)畫無(wú)限循環(huán)，需設(shè)置`animation-iteration-count:______`；若要讓動(dòng)畫反向播放，需設(shè)置`animation-direction:______`。答案：infinite；alternate5.Grid布局中，`grid-column:2/span3`表示網(wǎng)格項(xiàng)從第2列開始，占據(jù)______列；`grid-template-areas`屬性需要配合網(wǎng)格項(xiàng)的______屬性使用。答案：3；`grid-area`三、簡(jiǎn)答題（每題8分，共40分）1.簡(jiǎn)述HTML語(yǔ)義化的優(yōu)勢(shì)。答案：①提升可訪問性（屏幕閱讀器可正確解析內(nèi)容結(jié)構(gòu)）；②利于SEO（搜索引擎更易理解內(nèi)容主題）；③代碼可維護(hù)性更高（標(biāo)簽含義明確，便于后續(xù)開發(fā)）；④減少冗余CSS（利用語(yǔ)義標(biāo)簽?zāi)J(rèn)樣式，降低樣式復(fù)雜度）。2.比較Flexbox和Grid布局的適用場(chǎng)景。答案：Flexbox適用于一維布局（單行/單列），如導(dǎo)航欄、按鈕組等線性排列場(chǎng)景；Grid適用于二維布局（行列組合），如網(wǎng)格卡片、復(fù)雜表單布局等需要同時(shí)控制行和列的場(chǎng)景。Flexbox側(cè)重子元素的順序和對(duì)齊，Grid側(cè)重整體網(wǎng)格結(jié)構(gòu)的劃分。3.實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的常用方法有哪些？各舉一例說(shuō)明。答案：①媒體查詢（@media）：`@media(max-width:768px){.container{flex-direction:column;}}`；②彈性布局（Flex/Grid）：`grid-template-columns:repeat(auto-fit,minmax(250px,1fr))`自動(dòng)調(diào)整列數(shù)；③百分比/相對(duì)單位（%、rem、vw）：`width:50%;font-size:1.2rem`；④圖片適配（srcset/sizes）：`<imgsrcset="small.jpg480w,large.jpg1200w"sizes="(max-width:768px)480px,1200px">`。4.解釋CSS中的“層疊”（Cascade）和“繼承”（Inheritance），并說(shuō)明它們的優(yōu)先級(jí)關(guān)系。答案：層疊指當(dāng)多個(gè)CSS規(guī)則作用于同一元素的同一屬性時(shí)，瀏覽器選擇最終值的過(guò)程（依據(jù)來(lái)源、優(yōu)先級(jí)、順序）；繼承指子元素默認(rèn)繼承父元素的某些屬性（如color、font-size）。層疊優(yōu)先級(jí)高于繼承，即顯式設(shè)置的屬性會(huì)覆蓋繼承值（如父元素color:red，子元素設(shè)置color:blue，則子元素顯示藍(lán)色）。5.如何解決CSS中“margin塌陷”（MarginCollapse）問題？答案：①觸發(fā)BFC（如設(shè)置父元素`overflow:hidden`或`display:flow-root`）；②為父元素添加邊框（`border:1pxsolidtransparent`）或內(nèi)邊距（`padding:1px`）；③將父元素設(shè)置為浮動(dòng)（`float:left`）或定位（`position:absolute`）；④使用Flex布局（父元素`display:flex`，子元素自動(dòng)成為Flex項(xiàng)，margin不塌陷）。四、綜合題（共2題，每題10分，共20分）1.請(qǐng)編寫HTML和CSS代碼，實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航欄，要求：桌面端：導(dǎo)航項(xiàng)水平排列，右側(cè)顯示“登錄”按鈕；移動(dòng)端（寬度≤768px）：導(dǎo)航項(xiàng)折疊為漢堡菜單（點(diǎn)擊展開），“登錄”按鈕保留在右側(cè)；導(dǎo)航欄背景色為2c3e50，文字顏色為ffffff；漢堡菜單使用純CSS實(shí)現(xiàn)（無(wú)需JavaScript）。答案：```html<navclass="navbar"><divclass="logo">Logo</div><inputtype="checkbox"id="menu-toggle"class="menu-toggle"><labelfor="menu-toggle"class="menu-btn"><span></span><span></span><span></span></label><ulclass="nav-links"><li><ahref="">首頁(yè)</a></li><li><ahref="">產(chǎn)品</a></li><li><ahref="">關(guān)于</a></li><liclass="login-btn"><ahref="">登錄</a></li></ul></nav><style>.navbar{background:2c3e50;padding:1rem;display:flex;align-items:center;justify-content:space-between;position:relative;}.logo{color:fff;font-size:1.5rem;}.nav-links{display:flex;align-items:center;gap:2rem;list-style:none;padding:0;margin:0;}.nav-linksa{color:fff;text-decoration:none;}.login-btn{margin-left:2rem;background:3498db;padding:0.5rem1rem;border-radius:4px;}.menu-btn{display:none;flex-direction:column;gap:5px;cursor:pointer;}.menu-btnspan{width:25px;height:3px;background:fff;transition:0.3s;}.menu-toggle{display:none;}/移動(dòng)端樣式/@media(max-width:768px){.menu-btn{display:flex;}.nav-links{position:absolute;top:100%;left:0;right:0;background:2c3e50;flex-direction:column;gap:1rem;padding:1rem;display:none;}.login-btn{margin-left:0;}/漢堡菜單展開效果/.menu-toggle:checked~.nav-links{display:flex;}/菜單圖標(biāo)動(dòng)畫/.menu-toggle:checked~.menu-btnspan:nth-child(1){transform:rotate(-45deg)translate(-5px,6px);}.menu-toggle:checked~.menu-btnspan:nth-child(2){opacity:0;}.menu-toggle:checked~.menu-btnspan:nth-child(3){transform:rotate(45deg)translate(-5px,-6px);}}</style>```2.請(qǐng)使用CSSGrid實(shí)現(xiàn)一個(gè)“瀑布流”布局，要求：包含6個(gè)卡片，卡片寬度固定為280px；列間距為20px；卡片高度隨機(jī)（150px-300px）；最后一行卡片左對(duì)齊（不拉伸填充）。答案：```html<divclass="masonry-grid"><divclass="card"style="height:200px;"></div><divclass=