CSS中级技能认证试卷

20 题 90 分钟难度：★★

考察知识点

本试卷主要考察以下进阶知识点：

高级布局（Flex、Grid、BFC）

BFC（块级格式化上下文）的触发条件与应用场景
Flex布局的核心属性与等宽布局实现
Grid布局的fr单位、repeat()函数、minmax()函数
gap属性在Flex布局中的应用

动画与过渡

CSS过渡基础概念
transition属性参数配置
多属性过渡设置
animation-fill-mode动画状态控制

性能优化

CSS性能优化核心目标与策略
重排与重绘的触发条件与优化方法
@import与关键CSS内联优化

选择器进阶

CSS选择器优先级计算规则
:is()、:where()等现代伪类的优先级
CSS层叠规则与继承机制

CSS预处理器（Sass、Less）

Sass嵌套规则与编译结果
&符号父选择器引用
mixin混合宏的定义与调用
@extend继承机制与最佳实践

💡 参考答案在文末

判断题

可以为多个CSS属性分别设置不同的过渡效果，如：transition: width 0.3s ease, height 0.5s linear;

对

错

在Sass嵌套规则中，& 符号总是代表当前所在块的父选择器。

对

错

单选题

以下Sass代码编译后的CSS是什么？

scss

.nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
  }
  a {
    color: blue;
    &:hover {
      color: red;
    }
  }
}

css .nav ul { margin: 0; padding: 0; } .nav li { display: inline-block; } .nav a { color: blue; } .nav a:hover { color: red; }

css nav ul { margin: 0; padding: 0; } nav li { display: inline-block; } nav a { color: blue; } nav a:hover { color: red; }

css .nav { ul { margin: 0; padding: 0; } li { display: inline-block; } }

css .nav ul, .nav li, .nav a { margin: 0; padding: 0; display: inline-block; color: blue; }

下列哪个CSS属性声明不能触发BFC（块级格式化上下文）？

overflow: hidden

display: inline-block

position: relative

float: left

animation-fill-mode: forwards; 的作用是什么？

动画结束后回到起始状态

动画结束后保持最后一帧的状态

动画开始前应用第一帧状态

动画无限循环播放

CSS性能优化的主要目标是什么？

减少CSS文件体积，加快下载速度

减少浏览器渲染时间，提升页面加载和交互体验

增加CSS选择器的复杂度

使用更多的CSS属性实现视觉效果

CSS过渡（transition）的主要作用是什么？

定义动画的关键帧序列

实现CSS属性值变化时的平滑过渡效果

创建无限循环的动画

控制元素的显示和隐藏

以下CSS选择器的优先级从高到低排列正确的是？

text

A. .box .title
B. #container .item
C. div p span
D. .nav:hover

B > A > D > C

B > D > A > C

A > B > D > C

D > B > A > C

多选题

以下哪些是CSS性能优化的有效策略？

减少使用通配符选择器 *

避免使用@import导入CSS

将关键CSS内联到HTML头部

使用transform替代left/top做位移动画

预加载所有CSS文件

关于CSS层叠规则，以下说法正确的是？

用户代理样式（浏览器默认样式）的优先级最低

用户样式（用户自定义CSS）的优先级高于作者样式（网页开发者CSS）

带 !important 的用户样式优先级高于带 !important 的作者样式

相同来源、相同优先级时，后声明的规则覆盖先声明的规则

initial 关键字会将属性重置为浏览器默认值

关于CSS选择器优先级，以下说法正确的是？

.container .box 和 .wrapper .box 的优先级相同

div.box 的优先级高于 .box

:is(.a, .b) 选择器的优先级等于 .a 和 .b 中优先级最高的那个

:where(.a, .b) 选择器的优先级为0，不参与优先级计算

内联样式 !important 与ID选择器 !important 优先级相同

以下哪些操作会触发重排？

修改元素的font-size

修改元素的transform属性

添加或删除DOM元素

修改元素的class属性（样式包含几何变化）

读取offsetWidth属性

关于Sass mixin，以下说法正确的是？

mixin可以定义默认参数值：@mixin box($width: 100px)

调用mixin时可以使用关键字参数：@include box($width: 200px)

mixin可以接收内容块，使用 @content 插入

mixin定义的样式会自动输出到CSS中，不需要调用

同一个mixin可以被多次调用，传入不同的参数值

关于Sass的 @extend，以下说法正确的是？

可以扩展任何CSS选择器，包括 .class、%placeholder、#id

扩展会将被扩展选择器的所有样式规则都合并过来

扩展一个选择器时，所有使用该选择器的地方都会受到影响

使用占位选择器 % 是扩展的最佳实践，避免产生未使用的CSS

在mixin内使用 @extend 是安全的，不会有副作用

BFC（块级格式化上下文）在实际开发中有哪些典型应用场景？

清除浮动导致的父元素高度塌陷

阻止外边距合并（margin collapse）

实现元素水平垂直居中

阻止元素被浮动元素覆盖

以下哪些display属性值会创建新的BFC（块级格式化上下文）？

display: flow-root

display: inline-block

display: table-cell

display: block

关于CSS Grid中的repeat()函数，以下说法正确的有？

repeat()可以与固定值混用，如 grid-template-columns: 200px repeat(3, 1fr)

repeat(auto-fill, 100px) 会自动创建尽可能多的100px宽度的列

repeat()中只能使用固定数值作为第一个参数

repeat(auto-fit, minmax(100px, 1fr)) 可以实现响应式网格布局

关于Flex布局中的gap属性，以下说法正确的有？

gap属性会为容器边缘的项目添加间距

gap属性可以替代使用margin设置项目间距的方法

gap: 20px 等同于 row-gap: 20px; column-gap: 20px;

gap属性的值只能是长度单位，不能是百分比

关于CSS Grid中的fr单位，以下说法正确的有？

fr单位只能在minmax()函数中使用

fr单位会自动分配容器中除去固定尺寸轨道后的剩余空间

1fr等于容器宽度的100%

fr单位可以与固定单位混用，如 grid-template-columns: 200px 1fr 1fr

填空题

CSS过渡的基本语法：transition: ____________ ____________ ____________ 延迟时间;

参考答案

1.正确 2.正确 3.A 4.C 5.B 6.B 7.B 8.A 9.A;B;C;D 10.A;C;D;E 11.A;B;C;D 12.A;C;D;E 13.A;B;C;E 14.A;B;C;D 15.A;B;D 16.A;B;C 17.A;B;D 18.B;C 19.B;D 20.属性名;持续时间;时间函数

想在手机上练习这套试卷？

使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码