CSS高级技能认证试卷

将所有样式写在一个巨大的CSS文件中，方便查找

按功能模块拆分文件，使用统一的命名规范和注释结构

每个开发者各自维护自己的样式文件，互不干涉

将样式直接内联在HTML元素中，避免样式冲突

Block（块）应该是一个独立、可复用的组件

Element（元素）使用双下划线 __ 与Block连接

Modifier（修饰符）使用单连字符 - 与Block或Element连接

BEM命名可以避免CSS选择器权重冲突

Element可以嵌套另一个Element，如 block__element1__element2

使用Autoprefixer自动添加浏览器前缀

使用CSS变量前检测是否支持

通过@supports规则提供特性检测

所有浏览器都使用相同的CSS代码

使用PostCSS进行CSS后处理

OOCSS的核心原则包括：分离结构和外观、分离容器和内容

SMACSS将CSS规则分为Base、Layout、Module、State、Theme五类

OOCSS鼓励使用后代选择器实现样式继承

SMACSS的State规则使用 is- 前缀命名

OOCSS的结构与外观分离意味着 .btn 定义结构，.btn-primary 定义颜色

SMACSS要求所有Module必须使用ID选择器

高权重选择器会降低样式的可覆盖性，增加维护成本

使用!important是解决权重问题的最佳方案

扁平化的选择器结构有助于降低权重冲突

ID选择器在组件库中应谨慎使用

嵌套选择器越深，权重越高，样式越稳定

构建 DOM 树 → 构建 CSSOM 树 → 布局 → 绘制 → 合成

构建 CSSOM 树 → 构建 DOM 树 → 绘制 → 布局 → 合成

构建 DOM 树 → 布局 → 构建 CSSOM 树 → 绘制 → 合成

构建 DOM 树 → 构建 CSSOM 树 → 合成 → 布局 → 绘制

计算 DOM 元素的几何信息（位置和大小）

将元素绘制到位图中

确定元素之间的层级关系

处理盒模型相关的属性计算

建立渲染树中节点的坐标系统

改变元素的 font-size 属性

获取元素的 offsetWidth 属性值

给元素添加或删除子节点

修改元素的 background-color 属性

改变浏览器窗口大小

使用 getComputedStyle 获取元素计算样式

transform: translateZ(0)

will-change: transform

position: absolute

opacity 配合动画使用

backface-visibility: hidden

overflow: hidden

容器查询基于元素自身的尺寸变化，媒体查询基于视口尺寸变化

容器查询只能在移动端使用，媒体查询只能在桌面端使用

容器查询使用JavaScript实现，媒体查询使用CSS实现

容器查询不支持嵌套，媒体查询支持嵌套

基于视口尺寸应用样式

需要预先声明容器才能使用

使用@media规则定义查询条件

样式变化不会因元素在页面中位置不同而改变

是实现组件级响应式设计的最佳方案

cqw表示容器宽度的1%

cqh表示容器高度的1%

cqi表示容器内联方向尺寸的1%

cqb表示容器块级方向尺寸的1%

cqmin表示视口最小尺寸的1%

normal是默认值，元素不作为查询容器

inline-size允许查询容器的内联方向尺寸

size允许查询容器的宽度和高度

设置inline-size后，容器的高度会被限制

size类型可以防止容器高度塌陷

CSS.supports('container-type', 'inline-size')

CSS.supports('@container (min-width: 1px)')

@supports (container-type: inline-size) { ... }

检查window.CSSContainerQuery是否存在

@supports container-type: inline-size { ... }

所有CSS属性动画都会自动触发硬件加速

只有transform和opacity属性动画可以绕过主线程，在合成线程处理

硬件加速需要显式设置will-change属性才能生效

硬件加速只适用于3D变换，2D变换不支持

transform: translate

transform: scale

opacity

width

left

transform: rotate

在全局样式中对大量元素设置will-change

在动画开始前通过JavaScript动态设置will-change

动画结束后移除will-change属性以释放资源

只对确实需要高性能动画的元素设置will-change

设置will-change: auto表示取消所有优化提示

样式计算阶段：确定元素应用的CSS规则最终值

布局阶段：计算每个元素的位置和大小

绘制阶段：将元素绘制到屏幕上

合成阶段：将各层组合成最终画面并显示

布局阶段同时计算元素的视觉变换效果

ID选择器100分，类选择器10分，元素选择器1分

ID选择器权重最高，其次是类选择器，最后是元素选择器，按出现数量累加

所有选择器权重相同，按CSS规则出现顺序决定优先级

内联样式权重最低，外部样式权重最高

.class

#id

[type="text"]

:hover

::before

div

:not(.active)

:not可以接受多个选择器参数，如:not(.a, .b)

:not可以嵌套使用，如:not(:not(.active))

:not可以匹配任何非指定选择器的元素

:not内部不能使用复合选择器

:not选择器可以与其他选择器组合使用

z-index只在同一层叠上下文内比较

子元素的z-index高于父元素层叠上下文的所有兄弟元素

不设置z-index的定位元素按DOM顺序渲染

z-index: auto不创建新的层叠上下文

创建层叠上下文的元素本身有base z-index参与父上下文的排序