2025年css考试题及答案.docxVIP

2025年css考试题及答案

一、单项选择题（每题2分，共20分）

1.以下关于CSS选择器优先级的描述，正确的是（）

A.内联样式ID选择器类选择器标签选择器

B.类选择器伪类选择器属性选择器

C.通配符选择器（）的优先级高于标签选择器

D.相邻兄弟选择器（+）的优先级由所关联的选择器决定

答案：A

解析：CSS优先级遵循“内联样式（1000）ID选择器（100）类/伪类/属性选择器（10）标签/伪元素选择器（1）”的规则；伪类与类选择器优先级相同；通配符选择器优先级为0；相邻兄弟选择器本身不影响优先级，优先级由其关联的选择器组合决定。

2.已知元素样式为`box-sizing:border-box;width:200px;padding:10px;border:2pxsolid000;`，其内容区域的宽度是（）

A.200px

B.176px

C.180px

D.196px

答案：B

解析：`border-box`模式下，元素总宽度（width属性值）包含内容区、内边距和边框。计算公式为：内容区宽度=widthpadding2border2=20010222=176px。

3.以下Flex属性中，用于定义弹性容器主轴方向的是（）

A.`flex-wrap`

B.`flex-direction`

C.`justify-content`

D.`align-items`

答案：B

解析：`flex-direction`决定主轴方向（row/row-reverse/column/column-reverse）；`flex-wrap`控制换行；`justify-content`定义主轴对齐方式；`align-items`定义交叉轴对齐方式。

4.关于伪元素`::before`和`::after`，以下说法错误的是（）

A.必须通过`content`属性定义内容（即使内容为空）

B.提供的元素属于行内元素，无法设置宽高

C.可以通过`display:block`转换为块级元素

D.会被屏幕阅读器读取，需注意无障碍性

答案：B

解析：伪元素默认是行内元素，但通过`display`属性可转换为块级或行内块级，此时可设置宽高；`content`为必需属性（值可为空字符串``）；部分屏幕阅读器会忽略伪元素内容，需谨慎使用。

5.触发BFC（块格式化上下文）的方式不包括（）

A.`float`属性值不为`none`

B.`position`为`absolute`或`fixed`

C.`overflow`属性值为`visible`

D.`display`为`inline-block`

答案：C

解析：BFC的触发条件包括：`float`非`none`、`position`为`absolute`/`fixed`、`overflow`非`visible`（如`hidden`/`auto`）、`display`为`inline-block`/`table-cell`等；`overflow:visible`不会触发BFC。

6.以下关于层叠上下文（StackingContext）的描述，正确的是（）

A.根元素（HTML）默认不形成层叠上下文

B.`z-index:auto`的定位元素会创建层叠上下文

C.层叠上下文中的元素按`z-index`值在局部层级中排序

D.非定位元素的`z-index`属性有效

答案：C

解析：根元素（HTML）默认创建层叠上下文；`z-index`为数值（非`auto`）的定位元素才会创建层叠上下文；非定位元素的`z-index`无效；层叠上下文中的元素在局部层级内按`z-index`排序，与其他层叠上下文独立。

7.若要为容器设置基于自身宽度的响应式布局，应使用（）

A.媒体查询（MediaQuery）

B.容器查询（ContainerQuery）

C.视口单位（vh/vw）

D.弹性布局（Flexbox）

答案：B

解析：容器查询（@container）可基于容器自身的尺寸（如宽度、高度）触发样式变化，适用于组件级响应式布局；媒体查询基于视口尺寸，适用于页面级响应；视口单位和弹性布局不直接解决容器内的响应问题。

8.以下CSS变量（CustomProperties）的声明和使用，正确的是（）

A.`:root{--main-color:ff0000;