2026年css专项测试题及答案

2026年css专项测试题及答案

一、单项选择题（总共10题，每题2分）1.以下CSS选择器权重最高的是（）A.标签选择器（div）B.类选择器（.box）C.ID选择器（header）D.内联样式（style属性）2.Flex布局中，justify-content:space-between的效果是（）A.项目在主轴上居中对齐B.项目在主轴上两端对齐，项目间间距相等C.项目在主轴上均匀分布，两端无间距D.项目在主轴上靠左对齐3.盒模型属性box-sizing:border-box的作用是（）A.元素宽度仅包含内容区B.元素宽度包含内容区、内边距和边框C.元素宽度包含内容区和内边距D.元素宽度包含边框和外边距4.关于伪类:visited，以下说法正确的是（）A.可以修改链接的背景色B.可以修改链接的字体颜色C.可以修改链接的边框样式D.可以修改链接的hover状态5.Grid布局中，grid-template-columns:repeat(auto-fit,minmax(200px,1fr))的作用是（）A.固定列宽为200pxB.列宽自适应，最小200px，剩余空间平均分配C.列数固定为4列D.列宽随内容变化6.position:fixed的元素相对于（）定位A.父元素B.最近的已定位祖先元素C.视口（Viewport）D.文档根元素7.定义并使用CSS变量的正确方式是（）A.--main-color:ff0000;color:var(--main-color);B.$main-color:ff0000;color:$main-color;C.main-color:ff0000;color:main-color;D.--main-color:ff0000;color:--main-color;8.animation-fill-mode:forwards的作用是（）A.动画结束后回到初始状态B.动画结束后保持最后一帧的状态C.动画开始前应用第一帧的状态D.动画来回播放9.媒体查询@media(min-width:768px)表示（）A.屏幕宽度小于768px时应用样式B.屏幕宽度大于等于768px时应用样式C.屏幕宽度等于768px时应用样式D.屏幕宽度大于768px时应用样式10.opacity:0和visibility:hidden的区别是（）A.opacity不占据文档流，visibility占据B.opacity影响子元素，visibility不影响C.opacity是过渡属性，visibility不是D.opacity可以继承，visibility不能二、填空题（总共10题，每题2分）1.CSS中设置元素圆角的属性是__________。2.Flex布局中，控制项目在交叉轴上对齐方式的属性是__________。3.Grid布局中，定义行与行之间间距的属性是__________（或__________，写其一即可）。4.CSS中设置元素不透明度的属性是__________，其取值范围是__________。5.伪元素::before和::after必须配合__________属性才能显示内容。6.CSS优先级计算的四大类权重（从高到低）依次是：__________、__________、__________、__________。7.让图片自适应容器大小的常用CSS代码是__________（写出核心属性组合）。8.position:absolute的元素相对于__________定位，且会__________文档流（填“脱离”或“不脱离”）。9.控制CSS动画播放次数的属性是__________，表示无限播放的取值是__________。10.实现文本超出容器显示省略号的三个核心CSS属性组合是：__________、__________、__________。三、判断题（总共10题，每题2分）1.CSS中的!important规则会覆盖所有其他样式，包括内联样式。（）2.Flex布局中的flex-grow属性用于设置项目的缩小比例。（）3.Grid布局是二维布局（行+列），Flex布局是一维布局（行或列）。（）4.伪类:hover可以应用于所有HTML元素（如div、span）。（）5.CSS变量可以在媒体查询中重新定义，实现动态样式切换。（）6.position:relative的元素不会脱离文档流，其偏移量相对于自身原始位置。（）7.opacity:0的元素依然占据文档流空间，display:none的元素不占据。（）8.animation-delay属性的取值可以是负数，表示动画从中间状态开始播放。（）9.@media(max-width:768px)表示屏幕宽度大于768px时应用样式。（）10.CSS中的float属性会导致父元素高度坍塌，需要通过清除浮动解决。（）四、简答题（总共4题，每题5分）1.请简述CSS盒模型的组成及content-box与border-box的核心区别。2.请解释Flex布局中flex属性的简写含义（flex:growshrinkbasis）。3.请说明CSS动画（animation）与过渡（transition）的主要区别。4.请简述CSS优先级的计算规则，并举例说明（如box.text与divbox的权重对比）。五、讨论题（总共4题，每题5分）1.在响应式设计中，如何实现移动端与桌面端的布局切换？请举例说明常用方法。2.请讨论CSSGrid布局相对于Flex布局的优势及适用场景。3.请分析CSS变量（CustomProperties）在项目中的应用价值及使用注意事项。4.请结合场景说明position属性的5个取值（static、relative、absolute、fixed、sticky）的适用情况。答案及解析一、单项选择题答案1.D2.B3.B4.B5.B6.C7.A8.B9.B10.B二、填空题答案1.border-radius2.align-items3.grid-row-gap（或gap）4.opacity；0到1（或0~1）5.content6.内联样式；ID选择器；类/伪类/属性选择器；标签/伪元素选择器7.max-width:100%;height:auto;8.最近的已定位祖先元素；脱离9.animation-iteration-count；infinite10.white-space:nowrap;overflow:hidden;text-overflow:ellipsis;三、判断题答案1.√2.×3.√4.√5.√6.√7.√8.√9.×10.√四、简答题答案1.CSS盒模型由内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成。content-box是默认盒模型，元素宽度=内容区宽度，border和padding会额外增加总宽度；border-box的元素宽度=内容区+padding+border，总宽度固定，border和padding不会撑大元素。2.flex属性是flex-grow、flex-shrink、flex-basis的简写，默认值01auto。flex-grow：项目的放大比例（剩余空间分配）；flex-shrink：项目的缩小比例（空间不足时收缩）；flex-basis：项目的初始宽度（优先于width）。例如flex:11200px表示项目可放大、可缩小，初始宽度200px。3.过渡（transition）是“状态切换的平滑变化”，需要触发条件（如hover、click），只能定义开始和结束状态；动画（animation）通过@keyframes定义多个关键帧，可自动播放，支持循环、方向、填充模式等，更灵活。例如transition用于hover时按钮变色，animation用于加载时的旋转动画。4.优先级规则：权重值越大越优先，权重计算为“内联样式（1000）>ID（100）>类/伪类/属性（10）>标签/伪元素（1）”；权重相加比较，相同权重后定义的样式覆盖前定义的；!important提升优先级到最高。例如box.text（100+10=110）比divbox（1+100=101）优先，比.text（10）优先。五、讨论题答案1.响应式布局切换的核心是“媒体查询（@media）+弹性布局”。常用方法：①媒体查询根据屏幕宽度切换布局，如移动端用flex-direction:column（垂直排列），桌面端用row（水平排列）；②流体布局：用百分比、rem代替固定像素，适配不同屏幕；③弹性图片：max-width:100%;height:auto;避免图片溢出；④栅格系统：如Bootstrap的.col-sm-6（小屏占6列）、.col-lg-3（大屏占3列）。例如：@media(min-width:768px){.nav{display:flex;justify-content:space-between;}}@media(max-width:767px){.nav{flex-direction:column;}}。2.Grid布局的优势：①二维控制：同时管理行和列，精确调整单元格位置（如grid-row、grid-column）；②更灵活的网格定义：用repeat、auto-fit等函数实现自适应列数；③命名区域：grid-template-areas用语义化名称布局（如“headerheader”“sidebarmain”）。适用场景：复杂二维布局（如仪表盘、卡片列表、网页整体布局）；Flex布局适用于一维排列（如导航栏、按钮组、对齐内容）。例如Grid可实现“三列等高布局”，而Flex需要额外处理margin或align-items:stretch。3.CSS变量的价值：①集中管理：将主题色、间距等统一定义为变量（如--main-color:2196F3），修改时只需改一处；②动态切换：通过JS或媒体查询重新赋值（如@media(prefers-color-scheme:dark){--main-color:fff;}）；③提高可维护性：避免重复代码。注意事项：①变量名以--开头，用var()调用（如color:var(--main-color,000)，后者是默认值）；②有作用域：父元素定义的变量子元素可继承；③兼容性：IE不支持，需兼容时可配合PostCSS降级。4.position各取值的适用场景：①static（默认）：正常文档流，无特殊定位需求；②relative：用于父元素，作为absolut