2025年css3筆試題及答案一、單項(xiàng)選擇題（每題2分，共30分）1.以下哪項(xiàng)是CSS3新增的結(jié)構(gòu)偽類(lèi)選擇器？A.:first-childB.:nth-last-of-type(2n)C.:linkD.:hover答案：B。解析：:nth-last-of-type是CSS3新增的結(jié)構(gòu)偽類(lèi)，用于匹配同類(lèi)型中倒數(shù)第n個(gè)元素；:first-child是CSS2.1已有的；:link和:hover屬于動(dòng)態(tài)偽類(lèi)。2.關(guān)于CSS3彈性布局（Flexbox），以下說(shuō)法錯(cuò)誤的是？A.flex容器默認(rèn)主軸方向是row（水平）B.flex-shrink屬性用于定義項(xiàng)目的收縮比例，默認(rèn)值為1C.align-items屬性控制項(xiàng)目在交叉軸上的對(duì)齊方式D.flex-wrap屬性默認(rèn)值為wrap（換行）答案：D。解析：flex-wrap默認(rèn)值為nowrap（不換行），wrap表示換行，wrap-reverse表示反向換行。3.若要讓元素在父容器中水平垂直居中，且父容器尺寸不固定，最可靠的CSS3實(shí)現(xiàn)方式是？A.position:absolute;left:50%;top:50%;margin:autoB.display:flex;justify-content:center;align-items:centerC.text-align:center;line-height:父容器高度D.margin:0auto;vertical-align:middle答案：B。解析：Flex布局通過(guò)justify-content（主軸對(duì)齊）和align-items（交叉軸對(duì)齊）可輕松實(shí)現(xiàn)任意尺寸容器的居中，兼容性良好；A選項(xiàng)需配合transform:translate(-50%,-50%)修正偏移；C僅適用于行內(nèi)元素；D無(wú)法垂直居中。4.以下哪組屬性組合可實(shí)現(xiàn)元素從透明到不透明的漸變過(guò)渡？A.transition:opacity1s;opacity:0→opacity:1B.animation:fadeIn1s;@keyframesfadeIn{from{opacity:0}to{opacity:1}}C.bothAandBD.僅A答案：C。解析：過(guò)渡（transition）需要觸發(fā)條件（如:hover），動(dòng)畫(huà)（animation）可自動(dòng)執(zhí)行，但兩者均能實(shí)現(xiàn)透明度漸變。5.關(guān)于CSS3網(wǎng)格布局（Grid），以下屬性用于定義列軌道尺寸的是？A.grid-template-rowsB.grid-template-columnsC.grid-auto-rowsD.grid-auto-columns答案：B。解析：grid-template-columns定義列軌道，grid-template-rows定義行軌道；grid-auto-用于自動(dòng)提供的軌道。6.媒體查詢(xún)@media(min-width:768px)and(max-width:992px)表示？A.視口寬度小于768px時(shí)生效B.視口寬度在768px到992px之間時(shí)生效C.視口寬度大于992px時(shí)生效D.視口高度在768px到992px之間時(shí)生效答案：B。解析：min-width表示“最小寬度”（大于等于），max-width表示“最大寬度”（小于等于），兩者結(jié)合即區(qū)間生效。7.以下哪項(xiàng)是CSS3盒模型box-sizing屬性的合法值？A.content-boxB.padding-boxC.margin-boxD.border-padding-box答案：A。解析：box-sizing默認(rèn)值為content-box（寬高僅包含內(nèi)容），另一個(gè)常用值為border-box（寬高包含內(nèi)容、內(nèi)邊距和邊框）；padding-box和margin-box已被棄用。8.若要為元素添加高斯模糊效果，應(yīng)使用以下哪個(gè)濾鏡屬性？A.filter:blur(5px)B.filter:grayscale(50%)C.filter:brightness(150%)D.filter:contrast(200%)答案：A。解析：blur()用于高斯模糊，參數(shù)為模糊半徑；grayscale是灰度，brightness是亮度，contrast是對(duì)比度。9.CSS3中，使用變量（CustomProperties）時(shí)，正確的聲明和調(diào)用方式是？A.--main-color:ff0000;color:var(--main-color)B.$main-color:ff0000;color:$main-colorC.@main-color:ff0000;color:@main-colorD.main-color:ff0000;color:main-color答案：A。解析：CSS變量以--開(kāi)頭聲明，通過(guò)var()函數(shù)調(diào)用；$是Sass變量，@是Less變量，均非原生CSS語(yǔ)法。10.關(guān)于偽元素（Pseudo-elements），以下說(shuō)法正確的是？A.偽元素用單冒號(hào)（:）表示B.::before和::after提供的內(nèi)容默認(rèn)是行內(nèi)元素C.一個(gè)元素最多只能使用一個(gè)偽元素D.偽元素可以綁定點(diǎn)擊事件答案：B。解析：CSS3規(guī)范中偽元素使用雙冒號(hào)（::），但單冒號(hào)仍兼容；::before和::after默認(rèn)display:inline；一個(gè)元素可同時(shí)使用::before和::after；偽元素是虛擬元素，無(wú)法綁定事件。11.以下哪項(xiàng)不是CSS3多列布局（Multi-column）的屬性？A.column-countB.column-gapC.column-ruleD.column-align答案：D。解析：多列布局屬性包括column-count（列數(shù)）、column-gap（列間距）、column-rule（列分隔線）；column-align非標(biāo)準(zhǔn)屬性。12.動(dòng)畫(huà)屬性animation-timing-function的默認(rèn)值是？A.easeB.linearC.ease-inD.ease-out答案：A。解析：animation-timing-function默認(rèn)緩動(dòng)函數(shù)為ease（慢-快-慢），linear為勻速。13.若要讓元素在滾動(dòng)時(shí)保持固定位置，應(yīng)使用以下哪個(gè)定位方式？A.position:absoluteB.position:fixedC.position:stickyD.position:relative答案：C。解析：sticky定位結(jié)合了relative和fixed，元素在超出父容器前保持相對(duì)定位，滾動(dòng)到視口邊緣時(shí)變?yōu)楣潭ǘㄎ?；fixed相對(duì)于視口固定，不受父容器限制。14.關(guān)于背景屬性background-clip，以下值表示背景繪制到內(nèi)容框邊緣的是？A.border-boxB.padding-boxC.content-boxD.text答案：C。解析：background-clip默認(rèn)值為border-box（繪制到邊框外沿），padding-box到內(nèi)邊距外沿，content-box到內(nèi)容外沿，text（CSS3新增）僅繪制到文字區(qū)域（需配合-webkit-text-fill-color:transparent）。15.以下哪組選擇器優(yōu)先級(jí)由高到低排列正確？A.內(nèi)聯(lián)樣式>ID選擇器>類(lèi)選擇器>標(biāo)簽選擇器B.類(lèi)選擇器>ID選擇器>內(nèi)聯(lián)樣式>標(biāo)簽選擇器C.標(biāo)簽選擇器>類(lèi)選擇器>ID選擇器>內(nèi)聯(lián)樣式D.內(nèi)聯(lián)樣式>類(lèi)選擇器>ID選擇器>標(biāo)簽選擇器答案：A。解析：優(yōu)先級(jí)規(guī)則：!important>內(nèi)聯(lián)樣式（1000）>ID選擇器（100）>類(lèi)/偽類(lèi)/屬性選擇器（10）>標(biāo)簽/偽元素選擇器（1）>通配符（0）。二、填空題（每題2分，共20分）1.CSS3中，彈性容器需設(shè)置的display屬性值為_(kāi)_____或______。答案：flex；inline-flex2.網(wǎng)格布局中，使用______屬性定義行和列的軌道尺寸，例如______（示例）。答案：grid-template；grid-template:repeat(3,1fr)/200pxauto（行/列示例）3.動(dòng)畫(huà)關(guān)鍵幀使用______規(guī)則定義，若要讓動(dòng)畫(huà)無(wú)限循環(huán)，需設(shè)置______屬性為infinite。答案：@keyframes；animation-iteration-count4.漸變背景分為線性漸變和徑向漸變，對(duì)應(yīng)的函數(shù)分別是______和______。答案：linear-gradient()；radial-gradient()5.媒體查詢(xún)中，______用于檢測(cè)視口寬度，______用于檢測(cè)設(shè)備像素比。答案：width；-webkit-min-device-pixel-ratio（或min-resolution）6.偽元素::first-letter可用于設(shè)置______，::selection用于定義______。答案：首字母樣式；選中文本樣式7.CSS3盒陰影屬性為_(kāi)_____，若要添加內(nèi)陰影需設(shè)置______關(guān)鍵字。答案：box-shadow；inset8.彈性布局中，flex屬性是______、______、______的簡(jiǎn)寫(xiě)，默認(rèn)值為01auto。答案：flex-grow；flex-shrink；flex-basis9.混合模式屬性______用于定義元素與背景的混合方式，常見(jiàn)值有______（舉例）。答案：mix-blend-mode；multiply（正片疊底）、screen（濾色）10.響應(yīng)式設(shè)計(jì)中，視口元標(biāo)簽的標(biāo)準(zhǔn)寫(xiě)法是______。答案：<metaname="viewport"content="width=device-width,initial-scale=1.0">三、簡(jiǎn)答題（每題5分，共40分）1.簡(jiǎn)述Flex布局和Grid布局的核心區(qū)別及適用場(chǎng)景。答案：Flex布局（彈性盒）是一維布局模型，主要處理單行或單列的布局，適用于局部元素對(duì)齊（如導(dǎo)航欄、按鈕組）；Grid布局（網(wǎng)格）是二維布局模型，可同時(shí)控制行和列，適用于整體頁(yè)面結(jié)構(gòu)（如網(wǎng)格卡片、多列布局）。2.什么是BFC（塊格式化上下文）？列舉至少3種觸發(fā)BFC的方式及常見(jiàn)應(yīng)用場(chǎng)景。答案：BFC是頁(yè)面中的一個(gè)獨(dú)立渲染區(qū)域，內(nèi)部元素的布局不受外部影響。觸發(fā)方式：float非none、position為absolute/fixed、display為inline-block/table-cell、overflow非visible。應(yīng)用場(chǎng)景：防止margin塌陷、清除浮動(dòng)、解決多列布局高度不一致問(wèn)題。3.CSS過(guò)渡（transition）和動(dòng)畫(huà)（animation）的主要區(qū)別是什么？各舉一個(gè)應(yīng)用場(chǎng)景。答案：transition需要觸發(fā)條件（如:hover、:focus），僅能定義開(kāi)始和結(jié)束狀態(tài)；animation通過(guò)@keyframes定義多個(gè)關(guān)鍵幀，可自動(dòng)循環(huán)。場(chǎng)景示例：transition用于鼠標(biāo)懸停時(shí)的按鈕顏色漸變；animation用于無(wú)限循環(huán)的加載旋轉(zhuǎn)效果。4.媒體查詢(xún)（MediaQuery）在響應(yīng)式設(shè)計(jì)中的作用是什么？寫(xiě)出一個(gè)針對(duì)移動(dòng)端（寬度≤767px）的媒體查詢(xún)示例。答案：媒體查詢(xún)用于根據(jù)設(shè)備特性（如屏幕寬度、分辨率）應(yīng)用不同的CSS規(guī)則，實(shí)現(xiàn)頁(yè)面適配不同設(shè)備。示例：@media(max-width:767px){.container{padding:10px;}}5.偽類(lèi)（Pseudo-classes）和偽元素（Pseudo-elements）的本質(zhì)區(qū)別是什么？各舉兩個(gè)例子。答案：偽類(lèi)用于表示元素的狀態(tài)或位置（如:hover、:nth-child(2)），不提供新元素；偽元素用于創(chuàng)建虛擬的元素（如::before、::first-line），可操作內(nèi)容的樣式。6.box-sizing:border-box有什么作用？為什么在響應(yīng)式設(shè)計(jì)中常用此屬性？答案：border-box使元素的寬度/高度包含內(nèi)容、內(nèi)邊距和邊框，避免因padding/border導(dǎo)致尺寸溢出。響應(yīng)式設(shè)計(jì)中，固定容器寬度時(shí)，border-box可確保子元素尺寸計(jì)算更直觀，減少布局錯(cuò)位。7.如何定義CSS變量？簡(jiǎn)述其作用域和覆蓋規(guī)則。答案：變量聲明：:root{--primary-color:3498db;}（全局）或局部元素聲明；調(diào)用：color:var(--primary-color)。作用域：全局變量在:root中定義，可繼承；局部變量?jī)H在當(dāng)前元素及其子元素生效。覆蓋規(guī)則：后代元素可重新聲明同名變量覆蓋父級(jí)。8.混合模式（mix-blend-mode）和濾鏡（filter）的區(qū)別是什么？各舉一個(gè)應(yīng)用場(chǎng)景。答案：混合模式控制元素與背景（包括父元素和頁(yè)面背景）的像素混合效果（如multiply模擬疊加）；濾鏡修改元素自身的視覺(jué)效果（如blur模糊、grayscale去色）。場(chǎng)景示例：混合模式用于圖片與文字的融合效果；濾鏡用于調(diào)整圖片亮度或添加模糊。四、綜合題（共10分）1.請(qǐng)使用Flex布局實(shí)現(xiàn)一個(gè)“圣杯布局”（Header、Footer固定高度，中間內(nèi)容區(qū)域左右兩欄寬度固定，中間欄自適應(yīng)，且內(nèi)容優(yōu)先加載）。要求寫(xiě)出HTML結(jié)構(gòu)和完整CSS代碼。答案：HTML結(jié)構(gòu)：```html<divclass="container"><header>Header</header><divclass="content"><mainclass="main">MainContent</main><asideclass="left">LeftSidebar</aside><asideclass="right">RightSidebar</aside></div><footer>Footer</footer></div>```