2026年css基础题测试题及答案

2026年css基础题测试题及答案

一、单项选择题（总共10题，每题2分）1.CSS中用于设置元素背景颜色的属性是？A.colorB.background-colorC.bgcolorD.background2.以下哪个选择器优先级最高？A.类选择器（.class）B.ID选择器（id）C.标签选择器（p）D.通配符选择器（）3.如何让`<div>`元素水平居中？A.margin:auto;B.text-align:center;C.align:center;D.position:center;4.`display:none;`和`visibility:hidden;`的主要区别是？A.前者隐藏元素且不占空间，后者占空间B.前者占空间，后者不占空间C.两者效果相同D.前者可动画过渡，后者不能5.Flex布局中，设置子元素沿主轴等间距分布的属性是？A.justify-content:space-around;B.justify-content:space-between;C.align-items:center;D.flex-direction:row;6.以下哪个单位是相对于视口宽度的？A.pxB.emC.remD.vw7.如何为元素添加圆角效果？A.border-round:5px;B.corner-radius:5px;C.border-radius:5px;D.round-border:5px;8.CSS3中实现动画的关键字是？A.transitionB.animateC.@keyframesD.transform9.`position:absolute;`的元素相对于谁定位？A.自身默认位置B.浏览器窗口C.最近的已定位祖先D.父元素10.媒体查询中，判断设备屏幕最大宽度为768px的写法是？A.@media(min-width:768px)B.@media(max-device:768px)C.@media(max-width:768px)D.@mediascreenand(width<=768px)---二、填空题（总共10题，每题2分）1.清除浮动常用的方法是使用`______:both;`。2.设置文本居中对齐的属性是`text-align:______;`。3.CSS3中实现2D旋转的函数是`______(45deg);`。4.盒模型的总宽度=内容宽度+______+边框宽度+外边距。5.伪类`:______`用于定义鼠标悬停在元素上的样式。6.使用`______`属性可定义多个背景图。7.实现文字阴影效果的属性是`______`。8.Flex布局中，设置子元素换行的属性是`flex-wrap:______;`。9.通过`______`属性可自定义鼠标指针样式。10.CSS变量声明的前缀是`______`（例如：`--main-color`）。---三、判断题（总共10题，每题2分）1.CSS只能控制网页样式，不能影响布局。()2.`z-index`属性对所有定位元素（position非static）有效。()3.`em`单位是相对于父元素的字体大小。()4.`!important`规则会覆盖内联样式。()5.伪元素`::before`必须配合`content`属性使用。()6.`box-sizing:border-box;`会使元素宽度包含内边距和边框。()7.媒体查询仅能基于屏幕宽度进行响应。()8.CSSGrid布局与Flex布局不能同时使用。()9.`opacity:0;`的元素无法接收点击事件。()10.`@import`规则必须写在CSS文件开头。()---四、简答题（总共4题，每题5分）1.简述盒模型（BoxModel）的组成部分及其作用。2.解释BFC（块级格式化上下文）的形成条件及常见应用场景。3.描述Flex布局中`flex-grow`、`flex-shrink`和`flex-basis`属性的含义。4.列举三种实现响应式图片的技术方案。---五、讨论题（总共4题，每题5分）1.分析CSS选择器优先级计算规则，并举例说明如何覆盖样式。2.对比浮动布局、Flex布局和Grid布局的优缺点及适用场景。3.讨论CSS预处理器（如Sass/Less）的核心功能及其对开发效率的影响。4.如何通过CSS优化网页性能？请列举具体策略。---答案及解析一、单项选择题1.B（background-color是标准属性）2.B（ID选择器优先级为100，高于类选择器10）3.A（块级元素水平居中需设置`margin:0auto;`）4.A（`display:none;`移除元素流，`visibility:hidden;`保留占位）5.B（`space-between`两端对齐，子项间距相等）6.D（vw表示视口宽度的1%）7.C（`border-radius`是标准属性）8.C（`@keyframes`定义动画关键帧）9.C（绝对定位相对于最近的非static祖先）10.C（`max-width`是响应式设计常用条件）二、填空题1.clear2.center3.rotate4.内边距（padding）5.hover6.background-image7.text-shadow8.wrap9.cursor10.--三、判断题1.✕（CSS控制布局是核心功能）2.✓（z-index仅作用于定位元素）3.✓（em继承父级字体大小）4.✓（!important优先级最高）5.✓（content是必需属性）6.✓（border-box包含padding和border）7.✕（可基于高度、方向等）8.✕（两者可嵌套使用）9.✕（仍可触发事件，需用`pointer-events:none;`禁用）10.✓（避免规则覆盖问题）四、简答题1.盒模型组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。作用：控制元素尺寸和空间分布，内边距增加内容与边框间距，边框定义边界，外边距控制元素间距离。2.BFC条件：根元素、浮动、绝对定位、`overflow`非visible等。应用场景：清除浮动、防止外边距合并、隔离独立渲染区域避免布局干扰。3.Flex属性：-`flex-grow`：剩余空间分配比例（默认0不扩展）-`flex-shrink`：空间不足时收缩比例（默认1收缩）-`flex-basis`：初始主轴尺寸（默认auto）4.响应式图片方案：-`srcset`+`sizes`属性-`<picture>`元素多源适配-CSS媒体查询切换背景图-SVG矢量图适配任意分辨率五、讨论题1.优先级规则：内联样式>ID>类/伪类>标签/伪元素。计算方式：ID数×100+类数×10+标签数×1。覆盖方法：增加选择器权重（如叠加类）、使用`!important`（慎用）、或重构HTML结构。2.布局对比：-浮动：兼容性好但需清除浮动，适合传统文本环绕。-Flex：一维布局，灵活控制子项对齐/分布，适合组件内排列。-Grid：二维网格，精确控制行列，适合整体页面框架。3.预处理器价值：支持变量、嵌套、混合（mixin）、函数等，提升代码复用性；模块化管理；编译后输出优化CSS。显著减少重复代码，增强可维护性，但需构建流程支持。4.性能优化策略：-减少重排：