🎨 CSS

What is CSS? What are its main functions?

考察点：基础概念理解。

答案：

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML文档外观和格式的样式表语言。它将内容与表现分离，通过选择器定位HTML元素并为其添加样式规则，控制元素的布局、颜色、字体、间距等视觉效果。

主要作用：

• 样式控制：控制网页元素的外观，包括颜色、字体、大小、边距等
• 布局管理：实现页面的整体布局和元素定位
• 响应式设计：通过媒体查询适配不同设备和屏幕尺寸
• 动画效果：创建过渡动画和关键帧动画
• 提升用户体验：通过视觉设计增强页面的可用性和美观性

实际应用：

• 网页美化和品牌视觉统一
• 移动端适配和响应式布局
• 用户界面交互反馈
• 打印样式优化

What types of CSS selectors are there? What are their characteristics?

考察点：选择器分类。

答案：

CSS选择器是用于选择HTML元素并应用样式的模式。根据选择方式和特征，CSS选择器可以分为多种类型。

主要选择器类型：

• 基础选择器：

  /* 元素选择器 */
  p { color: blue; }
  
  /* 类选择器 */
  .highlight { background: yellow; }
  
  /* ID选择器 */
  #header { font-size: 24px; }
  
  /* 通配符选择器 */
  * { margin: 0; }
  

• 组合选择器：

  /* 后代选择器 */
  div p { color: red; }
  
  /* 子元素选择器 */
  div > p { font-weight: bold; }
  
  /* 相邻兄弟选择器 */
  h1 + p { margin-top: 0; }
  
  /* 通用兄弟选择器 */
  h1 ~ p { color: gray; }
  

• 属性选择器：

  [type="text"] { border: 1px solid #ccc; }
  [class*="btn"] { padding: 10px; }
  

• 伪类选择器：

  :hover, :focus, :nth-child(2n)
  

特点对比：

• 优先级：ID > 类 > 元素 > 通配符
• 性能：ID选择器最快，属性选择器相对较慢
• 复用性：类选择器复用性最高，ID选择器唯一性最强

实际应用：

• 根据优先级和性能选择合适的选择器
• 使用类选择器实现样式复用
• 利用伪类选择器增强交互体验

How to select elements with class and ID selectors? What are the differences?

考察点：选择器用法与区别。

答案：

类选择器和ID选择器是CSS中最常用的选择器，用于精确定位HTML元素并应用样式。

使用方法：

/* 类选择器 - 以点(.)开头 */
.button {
    background-color: blue;
    color: white;
    padding: 10px;
}

/* ID选择器 - 以井号(#)开头 */
#header {
    background-color: gray;
    height: 60px;
}

<!-- HTML中的使用 -->
<div id="header">头部</div>
<button class="button">点击</button>
<button class="button">提交</button>

主要区别：

性能对比：

• ID选择器：浏览器优化程度最高，查找速度最快
• 类选择器：性能良好，适合大多数场景

使用建议：

• ID选择器：用于页面唯一元素（如header、footer、main）
• 类选择器：用于样式复用和组件化开发
• 避免过度使用ID选择器，优先使用类选择器提高代码可维护性

实际应用：

• 页面布局结构使用ID选择器
• 按钮、卡片等可复用组件使用类选择器
• 结合JavaScript实现交互功能

What is the box model? What parts does it contain?

考察点：盒模型结构。

答案：

CSS盒模型是CSS布局的基础概念，它将每个HTML元素看作一个矩形盒子。这个盒子由四个部分组成，从内到外依次是：内容、内边距、边框和外边距。

盒模型组成部分：

.box {
    /* 内容区域 */
    width: 200px;
    height: 100px;
    
    /* 内边距 - 内容与边框之间的空间 */
    padding: 20px;
    
    /* 边框 - 围绕内边距和内容的线条 */
    border: 2px solid #333;
    
    /* 外边距 - 元素与其他元素之间的空间 */
    margin: 10px;
}

盒模型层次结构：

┌─────────────────────────────────┐
│           margin 外边距          │
│  ┌───────────────────────────┐  │
│  │        border 边框        │  │
│  │  ┌─────────────────────┐  │  │
│  │  │   padding 内边距    │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   content     │  │  │  │
│  │  │  │     内容      │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

盒模型类型：

• 标准盒模型（content-box）：width/height只包含内容区域

  box-sizing: content-box; /* 默认值 */
  /* 总宽度 = width + padding + border + margin */
  

• IE盒模型（border-box）：width/height包含内容、内边距和边框

  box-sizing: border-box;
  /* 总宽度 = width + margin */
  

实际应用：

• 精确控制元素尺寸和间距
• 理解元素占据的实际空间
• 避免布局错位和溢出问题
• 响应式设计中的尺寸计算

How to set element margins and padding?

考察点：margin与padding。

答案：

外边距（margin）和内边距（padding）是控制元素间距的重要属性。margin控制元素与其他元素之间的距离，padding控制元素内容与边框之间的距离。

设置方法：

/* 单个方向设置 */
.element {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;
    
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 20px;
}

/* 简写属性 */
.element {
    /* 四个值：上 右 下 左 */
    margin: 10px 15px 20px 25px;
    padding: 5px 10px 15px 20px;
    
    /* 三个值：上 左右 下 */
    margin: 10px 15px 20px;
    padding: 5px 10px 15px;
    
    /* 两个值：上下 左右 */
    margin: 10px 15px;
    padding: 5px 10px;
    
    /* 一个值：四个方向相同 */
    margin: 10px;
    padding: 5px;
}

特殊值的使用：

.center {
    /* 水平居中 */
    margin: 0 auto;
    width: 300px;
}

.reset {
    /* 重置间距 */
    margin: 0;
    padding: 0;
}

.negative {
    /* 负边距 - 可以重叠元素 */
    margin-top: -10px;
}

margin与padding的区别：

常见应用场景：

/* 卡片间距 */
.card {
    margin-bottom: 20px;
    padding: 16px;
}

/* 按钮内边距 */
.button {
    padding: 8px 16px;
}

/* 文章段落间距 */
p {
    margin-bottom: 1em;
}

实际应用：

• 页面布局中的元素间距控制
• 按钮、卡片等组件的内部间距
• 文本排版中的段落间距
• 响应式设计中的适配性间距

What are the common values of the display property? What are their functions?

考察点：display属性。

答案：

display属性决定了元素如何显示以及如何参与布局。它是CSS布局的核心属性之一，控制元素的渲染行为和布局方式。

常见display值：

/* 块级元素 - 独占一行，可设置宽高 */
.block {
    display: block;
    width: 300px;
    height: 100px;
}

/* 行内元素 - 与其他元素同行，不可设置宽高 */
.inline {
    display: inline;
    /* width和height无效 */
}

/* 行内块元素 - 与其他元素同行，可设置宽高 */
.inline-block {
    display: inline-block;
    width: 100px;
    height: 50px;
}

/* 隐藏元素 - 不显示且不占空间 */
.none {
    display: none;
}

/* 弹性盒子 - 一维布局 */
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 网格布局 - 二维布局 */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/* 表格显示 */
.table {
    display: table;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
}

display值对比：

实际应用示例：

/* 导航菜单 */
.nav {
    display: flex;
    justify-content: space-between;
}

.nav-item {
    display: inline-block;
    padding: 10px 15px;
}

/* 网格布局 */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* 垂直居中 */
.center {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

实际应用：

• 页面布局结构设计
• 组件内部元素排列
• 响应式网格系统
• 交互状态的显示/隐藏控制

How to hide an element without taking up space?

考察点：隐藏方式。

答案：

在CSS中有多种方式可以隐藏元素，其中display: none是最直接有效的方法，能够完全隐藏元素且不占据任何空间。

主要隐藏方法对比：

/* 方法1: display: none - 完全隐藏，不占空间 */
.hide-display {
    display: none;
}

/* 方法2: visibility: hidden - 隐藏但占空间 */
.hide-visibility {
    visibility: hidden;
}

/* 方法3: opacity: 0 - 透明但占空间，可交互 */
.hide-opacity {
    opacity: 0;
}

/* 方法4: 绝对定位移出视窗 - 不占空间 */
.hide-position {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* 方法5: 缩放为0 - 不占空间 */
.hide-scale {
    transform: scale(0);
}

/* 方法6: 裁剪隐藏 - 不占空间 */
.hide-clip {
    clip-path: polygon(0 0, 0 0, 0 0);
}

隐藏方法特性对比：

推荐的隐藏方式：

/* 最常用 - 切换显示状态 */
.element {
    display: block;
}

.element.hidden {
    display: none;
}

/* JavaScript控制 */
// element.style.display = 'none';
// element.style.display = 'block';

动画隐藏示例：

.fade-element {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.fade-element.hidden {
    opacity: 0;
    /* 动画结束后彻底隐藏 */
    visibility: hidden;
}

无障碍访问友好的隐藏：

/* 对屏幕阅读器隐藏但保留在DOM中 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

实际应用：

• 模态框、下拉菜单的显示/隐藏
• 响应式设计中特定设备的元素隐藏
• 加载状态和错误信息的切换
• 动画过渡效果的实现

How does CSS inheritance mechanism work? Which properties can be inherited?

考察点：继承机制。

答案：

CSS继承是指子元素自动获得父元素的某些样式属性的机制。这个特性让样式定义更加高效，减少了重复的样式声明，特别是在文本样式和字体设置方面。

继承工作原理：

/* 父元素设置样式 */
.parent {
    color: blue;
    font-size: 16px;
    font-family: Arial;
    border: 1px solid red; /* 不会被继承 */
}

/* 子元素自动继承文本相关属性 */
.child {
    /* 自动继承：color: blue; font-size: 16px; font-family: Arial */
    /* 不继承：border */
}

<div class="parent">
    我是父元素
    <p class="child">我是子元素，会继承父元素的文本样式</p>
</div>

可继承的属性类别：

/* 文本相关属性 - 可继承 */
.text-properties {
    color: #333;
    font-family: 'Helvetica, Arial';
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
    text-indent: 2em;
    letter-spacing: 1px;
    word-spacing: 2px;
}

/* 列表相关属性 - 可继承 */
.list-properties {
    list-style-type: disc;
    list-style-position: inside;
    list-style-image: url('bullet.png');
}

/* 表格相关属性 - 可继承 */
.table-properties {
    border-collapse: collapse;
    border-spacing: 2px;
    caption-side: top;
    empty-cells: show;
}

不可继承的属性：

/* 盒模型属性 - 不继承 */
.box-properties {
    width: 300px;
    height: 200px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
}

/* 定位属性 - 不继承 */
.position-properties {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 1000;
}

/* 背景属性 - 不继承 */
.background-properties {
    background-color: #f0f0f0;
    background-image: url('bg.jpg');
    background-position: center;
}

控制继承的关键字：

.inherit-control {
    /* 强制继承父元素的值 */
    border: inherit;
    
    /* 使用属性的初始值 */
    color: initial;
    
    /* 取消继承，使用默认值 */
    font-size: unset;
    
    /* 重置为用户代理样式表的值 */
    margin: revert;
}

实际应用示例：

/* 全局文本样式设置 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

/* 标题继承基础字体，但重写大小 */
h1, h2, h3 {
    /* 继承font-family, line-height, color */
    font-weight: 600;
}

/* 链接重写继承的颜色 */
a {
    color: #007bff; /* 覆盖继承的color */
    text-decoration: none;
}

继承的优势和注意事项：

• 优势：减少重复代码，统一页面样式，便于维护
• 注意：某些属性（如border、margin）不继承是有意义的
• 最佳实践：在根元素或容器元素设置基础样式，让子元素自然继承

实际应用：

• 全局字体和颜色主题设置
• 文档结构的层次化样式管理
• 组件化开发中的样式继承
• 主题切换和品牌样式统一

What are CSS cascade rules? How to determine priority when styles conflict?

考察点：层叠规则。

答案：

CSS层叠（Cascade）是指当多个CSS规则应用到同一个元素时，浏览器决定最终使用哪个规则的机制。层叠规则按照特定的优先级顺序来解决样式冲突。

层叠优先级顺序（从高到低）：

/* 1. 内联样式 - 优先级最高 */
<div style="color: red;">内联样式</div>

/* 2. ID选择器 */
#unique {
    color: blue; /* 优先级: 100 */
}

/* 3. 类选择器、属性选择器、伪类 */
.class-name {
    color: green; /* 优先级: 10 */
}

[type="text"] {
    color: yellow; /* 优先级: 10 */
}

:hover {
    color: purple; /* 优先级: 10 */
}

/* 4. 元素选择器、伪元素 */
div {
    color: orange; /* 优先级: 1 */
}

::before {
    content: ""; /* 优先级: 1 */
}

/* 5. 通配符选择器 */
* {
    color: gray; /* 优先级: 0 */
}

优先级计算方法：

/* 优先级计算：(内联, ID, 类/属性/伪类, 元素/伪元素) */

/* 示例1: (0, 1, 2, 1) = 121 */
#header .nav-item a {
    color: red;
}

/* 示例2: (0, 0, 2, 2) = 22 */
.container .nav a {
    color: blue;
}

/* 示例3: (0, 2, 0, 1) = 201 */
#header #nav a {
    color: green;
}

/* 示例1优先级最高，显示红色 */

!important声明：

.normal {
    color: blue;
}

.important {
    color: red !important; /* 强制最高优先级 */
}

/* 即使选择器优先级低，!important也会生效 */
p {
    color: green !important;
}

#specific-id .class {
    color: purple; /* 优先级虽高但无效，因为上面有!important */
}

层叠解决冲突的步骤：

1. 重要性：!important > 正常声明
2. 来源：内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式
3. 优先级：按选择器特殊性计算
4. 源码顺序：后定义的覆盖先定义的

实际应用示例：

/* 基础样式 */
.button {
    background: #ccc;
    color: #333;
    padding: 8px 16px;
}

/* 主题覆盖 */
.button.primary {
    background: #007bff;
    color: white;
}

/* 状态覆盖 */
.button:hover {
    opacity: 0.8;
}

/* 特殊情况强制覆盖 */
.button.disabled {
    background: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

最佳实践：

/* 建议的优先级使用策略 */

/* 1. 避免过度使用!important */
.avoid-important {
    /* 通过更具体的选择器代替!important */
}

/* 2. 保持选择器简洁 */
.nav-item { /* 好 */ }
div.container nav ul li a.nav-item { /* 避免 */ }

/* 3. 使用CSS变量统一管理 */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
}

.theme-button {
    background: var(--primary-color);
}

常见冲突解决：

• 使用更具体的选择器而非!important
• 合理组织CSS文件加载顺序
• 利用CSS变量实现主题统一管理
• 采用BEM等命名规范减少冲突

实际应用：

• 组件样式的覆盖和定制
• 主题切换和品牌定制
• 第三方库样式的修改
• 响应式设计中的样式优先级管理

What is float? What are the common use cases?

考察点：float用法。

答案：

CSS浮动（float）是一种布局技术，它使元素脱离正常的文档流，向左或向右移动直到碰到容器边缘或另一个浮动元素。浮动最初设计用于实现文本环绕图片的效果。

float基本用法：

/* 向左浮动 */
.float-left {
    float: left;
    width: 200px;
    height: 150px;
    margin-right: 20px;
}

/* 向右浮动 */
.float-right {
    float: right;
    width: 200px;
    height: 150px;
    margin-left: 20px;
}

/* 不浮动（默认值） */
.no-float {
    float: none;
}

文本环绕效果：

.article-image {
    float: left;
    width: 300px;
    height: 200px;
    margin: 0 20px 20px 0;
}

.article-content {
    /* 文本会自动环绕浮动的图片 */
    line-height: 1.6;
}

<div class="article">
    <img src="image.jpg" class="article-image" alt="文章图片">
    <p class="article-content">
        这里是文章内容，文本会环绕左侧的浮动图片...
    </p>
</div>

多列布局应用：

/* 传统的两列布局 */
.sidebar {
    float: left;
    width: 250px;
    background: #f5f5f5;
}

.main-content {
    float: right;
    width: calc(100% - 270px); /* 减去sidebar宽度和间距 */
    background: white;
}

/* 三列布局 */
.left-column {
    float: left;
    width: 200px;
}

.right-column {
    float: right;
    width: 200px;
}

.center-column {
    margin: 0 220px; /* 左右边距为侧边栏宽度+间距 */
}

浮动的特点：

.float-element {
    float: left;
    /* 浮动元素特点： */
    /* 1. 脱离文档流 */
    /* 2. 变为块级元素（可设置宽高） */
    /* 3. 宽度收缩为内容宽度 */
    /* 4. 不会超出包含块 */
    /* 5. 不会与其他浮动元素重叠 */
}

常见应用场景：

/* 1. 图片文字环绕 */
.news-item img {
    float: left;
    margin: 0 15px 15px 0;
}

/* 2. 导航菜单水平排列 */
.nav li {
    float: left;
    margin-right: 20px;
}

/* 3. 卡片网格布局 */
.card {
    float: left;
    width: calc(33.333% - 20px);
    margin: 10px;
}

/* 4. 工具栏按钮组 */
.toolbar .button {
    float: left;
    margin-right: 5px;
}

/* 5. 价格标签右对齐 */
.product-price {
    float: right;
    font-weight: bold;
    color: #e74c3c;
}

浮动的问题：

/* 父容器高度塌陷 */
.container {
    border: 1px solid #ccc;
    /* 子元素浮动后，容器高度变为0 */
}

.container .float-child {
    float: left;
    width: 200px;
    height: 150px;
}

现代替代方案：

/* Flexbox - 推荐用于一维布局 */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Grid - 推荐用于二维布局 */
.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 20px;
}

使用建议：

• 仍然适用：文本环绕图片、小范围的元素对齐
• 避免使用：复杂页面布局（推荐flexbox/grid）
• 注意清除浮动：防止布局问题
• 考虑响应式：移动端适配性

实际应用：

• 新闻文章中的图片文字环绕
• 简单的导航菜单布局
• 表单中的标签和输入框对齐
• 小型组件内部的元素排列

How to clear floats? What are the common methods?

考察点：清除浮动。

答案：

清除浮动是为了解决浮动元素导致的父容器高度塌陷和布局混乱问题。当子元素浮动后，它们脱离文档流，父容器无法正确计算高度，导致布局问题。

浮动问题示例：

/* 问题：父容器高度塌陷 */
.container {
    border: 2px solid #333;
    /* 没有设置高度，依赖子元素撑开 */
}

.float-item {
    float: left;
    width: 100px;
    height: 100px;
    background: #f0f0f0;
    margin: 10px;
}
/* 结果：容器高度为0，边框重叠 */

常用清除浮动方法：

/* 方法1: clear属性 - 在浮动元素后添加清除元素 */
.clear {
    clear: both; /* 清除左右两侧浮动 */
    /* clear: left; 只清除左侧浮动 */
    /* clear: right; 只清除右侧浮动 */
}

/* 方法2: 伪元素clearfix（推荐） */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 更完整的clearfix */
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

/* 方法3: overflow属性 */
.overflow-clear {
    overflow: hidden; /* 或 overflow: auto; */
    /* 触发BFC，包含浮动子元素 */
}

/* 方法4: display: flow-root（现代方法） */
.flow-root-clear {
    display: flow-root;
    /* 创建新的块格式化上下文 */
}

实际应用示例：

<!-- HTML结构 -->
<div class="container clearfix">
    <div class="sidebar">侧边栏</div>
    <div class="content">主内容</div>
</div>

/* CSS样式 */
.container {
    border: 2px solid #333;
    padding: 10px;
}

.sidebar {
    float: left;
    width: 200px;
    height: 300px;
    background: #e9ecef;
}

.content {
    float: right;
    width: calc(100% - 220px);
    height: 250px;
    background: #f8f9fa;
}

/* 使用clearfix清除浮动 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

各种方法的优缺点：

现代布局替代方案：

/* Flexbox布局 - 推荐 */
.flex-container {
    display: flex;
}

.flex-sidebar {
    flex: 0 0 200px;
    background: #e9ecef;
}

.flex-content {
    flex: 1;
    background: #f8f9fa;
}

/* Grid布局 - 推荐 */
.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
}

清除浮动的最佳实践：

/* 通用clearfix类 */
.cf::before,
.cf::after {
    content: " ";
    display: table;
}

.cf::after {
    clear: both;
}

/* 使用方式 */
.card-container {
    /* 应用到需要清除浮动的容器 */
}

.card {
    float: left;
    width: calc(33.333% - 20px);
    margin: 10px;
}

响应式清除浮动：

/* 移动端取消浮动 */
@media (max-width: 768px) {
    .responsive-float {
        float: none !important;
        width: 100% !important;
        margin: 10px 0;
    }
}

实际应用：

• 修复传统float布局的高度塌陷问题
• 卡片网格布局中的容器修复
• 导航菜单的容器高度问题
• 与现代布局技术（flex/grid）的过渡方案

What values does the position property have? What are their functions?

考察点：定位方式。

答案：

position属性控制元素在页面中的定位方式，决定了元素如何从正常的文档流中定位。不同的position值提供了不同的定位机制和布局控制能力。

position属性值详解：

/* 1. static - 默认值，正常文档流 */
.static {
    position: static;
    /* top, right, bottom, left 无效 */
    /* 按照HTML结构顺序排列 */
}

/* 2. relative - 相对定位 */
.relative {
    position: relative;
    top: 20px;    /* 相对于原位置向下20px */
    left: 30px;   /* 相对于原位置向右30px */
    /* 原位置仍占据空间 */
}

/* 3. absolute - 绝对定位 */
.absolute {
    position: absolute;
    top: 50px;    /* 相对于定位父元素 */
    right: 20px;
    /* 脱离文档流，不占据空间 */
}

/* 4. fixed - 固定定位 */
.fixed {
    position: fixed;
    bottom: 20px; /* 相对于浏览器窗口 */
    right: 20px;
    /* 不随页面滚动 */
}

/* 5. sticky - 粘性定位 */
.sticky {
    position: sticky;
    top: 0;       /* 粘附位置 */
    /* 在normal和fixed之间切换 */
}

各种定位的特点对比：

实际应用示例：

/* 相对定位 - 微调元素位置 */
.badge {
    position: relative;
    top: -2px;
    background: #dc3545;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
}

/* 绝对定位 - 覆盖层、提示框 */
.tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px;
    border-radius: 4px;
}

/* 固定定位 - 导航栏、返回顶部按钮 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #007bff;
    border-radius: 50%;
}

/* 粘性定位 - 表格标题、侧边栏 */
.table-header {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 10;
}

.sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
}

定位父元素的概念：

/* 建立定位上下文 */
.container {
    position: relative; /* 关键：非static值 */
    width: 400px;
    height: 300px;
    border: 1px solid #ccc;
}

/* 子元素相对于container定位 */
.child {
    position: absolute;
    top: 20px;    /* 距离container顶部20px */
    right: 20px;  /* 距离container右边20px */
}

层级控制（z-index）：

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    z-index: 1001; /* 比背景层级更高 */
}

响应式定位：

/* 移动端适配 */
.desktop-sidebar {
    position: sticky;
    top: 20px;
}

@media (max-width: 768px) {
    .desktop-sidebar {
        position: static; /* 移动端取消粘性定位 */
    }
}

常见应用场景：

• relative：按钮微调、图标位置、建立定位上下文
• absolute：下拉菜单、提示框、遮罩层、角标
• fixed：导航栏、悬浮按钮、公告栏、工具栏
• sticky：表格标题、目录导航、广告横幅

实际应用：

• 复杂页面布局的精确控制
• 交互组件的层级管理
• 响应式设计中的定位适配
• 用户体验优化的固定元素

How to implement absolute and relative positioning?

考察点：定位原理。

答案：

绝对定位和相对定位是CSS中最常用的定位方式。相对定位保持在文档流中但可以偏移，绝对定位则完全脱离文档流，相对于最近的定位父元素进行定位。

相对定位实现：

.relative-example {
    position: relative;
    top: 20px;      /* 向下偏移20px */
    left: 30px;     /* 向右偏移30px */
    /* 原始位置仍然被占用 */
}

/* 实际应用：微调元素位置 */
.input-group {
    position: relative;
}

.input-icon {
    position: relative;
    top: 2px;       /* 图标垂直居中微调 */
    margin-right: 5px;
}

绝对定位实现：

/* 建立定位上下文 */
.container {
    position: relative;  /* 关键：为子元素提供定位参考 */
    width: 300px;
    height: 200px;
    border: 1px solid #ddd;
}

/* 绝对定位子元素 */
.absolute-child {
    position: absolute;
    top: 10px;      /* 距离container顶部10px */
    right: 15px;    /* 距离container右边15px */
    width: 100px;
    height: 50px;
    background: #f0f0f0;
}

定位参考点的查找规则：

/* 绝对定位元素会向上查找第一个非static的祖先元素 */

.grandparent {
    /* position: static; 默认值，跳过 */
}

.parent {
    position: relative;  /* 这里建立定位上下文 */
}

.child {
    position: absolute;
    top: 0;
    left: 0;
    /* 相对于 .parent 定位，不是 .grandparent */
}

常用定位模式：

/* 1. 居中定位 */
.center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 或者已知宽高的情况下 */
    /* width: 200px; height: 100px;
    top: 50%; left: 50%;
    margin: -50px 0 0 -100px; */
}

/* 2. 四个角定位 */
.top-left {
    position: absolute;
    top: 0;
    left: 0;
}

.top-right {
    position: absolute;
    top: 0;
    right: 0;
}

.bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
}

.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* 3. 铺满容器 */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 或者使用 */
    /* top: 0; right: 0; bottom: 0; left: 0; */
}

实际应用案例：

/* 卡片组件的角标 */
.card {
    position: relative;
    width: 250px;
    height: 150px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
}

/* 下拉菜单 */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
}

/* 图片悬浮遮罩 */
.image-container {
    position: relative;
    overflow: hidden;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-container:hover .image-overlay {
    opacity: 1;
}

定位层级控制：

.modal-container {
    position: relative;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    z-index: 2;  /* 确保在背景之上 */
}

响应式定位：

.responsive-position {
    position: relative;
}

@media (min-width: 768px) {
    .responsive-position {
        position: absolute;
        top: 20px;
        right: 20px;
    }
}

注意事项：

• 绝对定位元素必须有定位上下文（非static的祖先元素）
• 相对定位不脱离文档流，原位置仍被占用
• 使用transform进行居中比margin方式更灵活
• 注意z-index的层级管理避免遮挡问题

实际应用：

• 复杂UI组件的精确布局
• 悬浮提示和下拉菜单
• 模态框和遮罩层
• 图标和徽章的定位

What is z-index? How does it affect element layering?

考察点：层级控制。

答案：

z-index属性控制定位元素在z轴（垂直于屏幕）上的层叠顺序，决定了元素的显示优先级。z-index值越大的元素显示在越上层，只对非static定位的元素有效。

基本用法：

.element1 {
    position: relative;
    z-index: 1;     /* 较低层级 */
    background: red;
}

.element2 {
    position: absolute;
    z-index: 10;    /* 较高层级，显示在上层 */
    background: blue;
}

.element3 {
    position: fixed;
    z-index: 100;   /* 最高层级 */
    background: green;
}

层叠上下文的概念：

/* 创建新的层叠上下文 */
.stacking-context {
    position: relative;
    z-index: 0;     /* 关键：创建层叠上下文 */
}

.child1 {
    position: absolute;
    z-index: 999;   /* 只在父级上下文内比较 */
}

.outside-element {
    position: absolute;
    z-index: 1;     /* 可能显示在child1之上 */
}

常用z-index层级规范：

/* 推荐的层级规范 */
:root {
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

.dropdown {
    z-index: var(--z-dropdown);
}

.modal-backdrop {
    z-index: var(--z-modal-backdrop);
}

.modal {
    z-index: var(--z-modal);
}

实际应用示例：

/* 导航栏 */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 下拉菜单 */
.dropdown-menu {
    position: absolute;
    z-index: 1000;
    background: white;
    border: 1px solid #ddd;
}

/* 模态框系统 */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    background: white;
}

实际应用：

• UI组件层级管理
• 模态框和弹窗控制
• 导航和悬浮元素
• 复杂布局的显示优先级

How to use transition to create simple animation effects?

考察点：transition动画。

答案：

transition属性用于创建平滑的过渡动画效果，当CSS属性值发生变化时，不是立即改变，而是在指定的时间内逐渐过渡到新值。

基本语法：

.element {
    transition: property duration timing-function delay;
    /* 或分别设置 */
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

常用应用示例：

/* 按钮悬停效果 */
.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

/* 多属性过渡 */
.card {
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

实际应用：

• 按钮和链接的交互反馈
• 表单元素的焦点状态
• 卡片和图片的悬停效果
• 导航菜单的展开收起

What’s the difference between pseudo-classes and pseudo-elements? Give examples.

考察点：伪类与伪元素。

答案：

伪类用于选择元素的特定状态，伪元素用于选择元素的特定部分或创建虚拟元素。伪类使用单冒号:，伪元素使用双冒号::。

伪类示例：

/* 状态伪类 */
a:hover { color: red; }          /* 悬停状态 */
input:focus { border-color: blue; }  /* 焦点状态 */
button:active { background: gray; }  /* 激活状态 */

/* 结构伪类 */
li:first-child { font-weight: bold; }    /* 第一个子元素 */
tr:nth-child(even) { background: #f9f9f9; }  /* 偶数行 */
p:not(.special) { color: #666; }         /* 排除特定类 */

伪元素示例：

/* 内容伪元素 */
.quote::before {
    content: """;
    font-size: 2em;
    color: #ccc;
}

.quote::after {
    content: """;
}

/* 选择伪元素 */
p::first-line { font-weight: bold; }     /* 第一行 */
p::first-letter { font-size: 2em; }     /* 第一个字母 */
::selection { background: yellow; }      /* 选中的文本 */

How to use @media to implement responsive layout?

考察点：媒体查询。

答案：

@media规则根据不同的设备特征和屏幕尺寸应用不同的CSS样式，是实现响应式设计的核心技术。

基本语法：

/* 移动端优先 */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板设备 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

常用断点：

/* 移动端 */
@media (max-width: 767px) {
    .mobile-only { display: block; }
    .desktop-only { display: none; }
}

/* 平板端 */
@media (min-width: 768px) and (max-width: 1023px) {
    .nav { flex-direction: column; }
}

/* 桌面端 */
@media (min-width: 1024px) {
    .desktop-only { display: block; }
    .mobile-only { display: none; }
}

How to calculate CSS selector specificity? What is the role of !important?

考察点：选择器优先级。

答案：

CSS选择器优先级按照(内联样式, ID, 类/属性/伪类, 元素/伪元素)的格式计算，数值越大优先级越高。

优先级计算：

/* (0,0,0,1) = 1 */
p { color: red; }

/* (0,0,1,0) = 10 */
.class { color: blue; }

/* (0,1,0,0) = 100 */
#id { color: green; }

/* (0,1,1,1) = 111 */
#id .class p { color: purple; }

!important的作用：

p { color: red !important; }    /* 强制最高优先级 */
#id { color: blue; }           /* 即使ID优先级高也无效 */

How to make images adapt to parent container width?

考察点：图片自适应。

答案：

/* 基本自适应 */
img {
    max-width: 100%;
    height: auto;
}

/* 完全填充容器 */
.container {
    width: 300px;
    height: 200px;
    overflow: hidden;
}

.container img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 保持比例裁剪 */
}

How to use overflow to control content overflow?

考察点：overflow属性。

答案：

.container {
    width: 200px;
    height: 100px;
}

/* 隐藏溢出内容 */
.hide-overflow {
    overflow: hidden;
}

/* 显示滚动条 */
.scroll-overflow {
    overflow: scroll;
}

/* 自动显示滚动条 */
.auto-overflow {
    overflow: auto;
}

/* 单方向控制 */
.x-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

What is the role of box-sizing property? What’s the difference between content-box and border-box?

考察点：盒模型计算。

答案：

box-sizing属性控制元素的宽高计算方式，决定padding和border是否包含在设定的宽高内。

两种模式对比：

/* 标准盒模型 - content-box (默认) */
.content-box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 2px solid #ccc;
    /* 实际宽度: 200 + 40 + 4 = 244px */
}

/* IE盒模型 - border-box (推荐) */
.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 2px solid #ccc;
    /* 实际宽度: 200px (padding和border包含在内) */
}

/* 全局设置 */
* {
    box-sizing: border-box;
}

实际应用：

• 响应式布局中的精确宽度控制
• 表单组件的一致性设计
• 网格系统的实现
• 避免宽度计算错误

What are the main axis and cross axis in flexbox layout?

考察点：flex原理。

答案：

flex布局基于两条轴线：主轴（main axis）和交叉轴（cross axis）。主轴由flex-direction属性确定，交叉轴垂直于主轴。

主轴和交叉轴：

/* 水平主轴（默认） */
.container {
    display: flex;
    flex-direction: row;  /* 主轴：水平，交叉轴：垂直 */
    justify-content: center;    /* 主轴对齐 */
    align-items: center;        /* 交叉轴对齐 */
}

/* 垂直主轴 */
.vertical {
    display: flex;
    flex-direction: column;  /* 主轴：垂直，交叉轴：水平 */
    justify-content: space-between;  /* 主轴对齐 */
    align-items: stretch;            /* 交叉轴对齐 */
}

实际应用：

• 理解flex属性的作用方向
• 正确使用justify-content和align-items
• 实现各种对齐和分布效果

How to achieve horizontal and vertical centering with flexbox?

考察点：flex居中。

答案：

.center-container {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    min-height: 100vh;        /* 全屏高度 */
}

/* 或者使用margin自动居中 */
.center-item {
    display: flex;
    margin: auto;
}

What’s the difference between grid layout and flexbox layout?

考察点：布局对比。

答案：

/* Flex - 一维布局 */
.flex-nav {
    display: flex;
    justify-content: space-between;
}

/* Grid - 二维布局 */
.grid-layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
}

How to implement a two-column adaptive layout with grid?

考察点：grid应用。

答案：

.two-column {
    display: grid;
    grid-template-columns: 250px 1fr;  /* 固定宽度 + 自适应 */
    gap: 20px;
}

/* 响应式两栏 */
@media (max-width: 768px) {
    .two-column {
        grid-template-columns: 1fr;  /* 移动端单列 */
    }
}

What is the working principle of position: sticky?

考察点：sticky定位。

答案：

sticky定位结合了relative和fixed的特性，元素在滚动到指定位置前表现为relative，到达位置后变为fixed。

.sticky-header {
    position: sticky;
    top: 0;              /* 粘附位置 */
    background: white;
    z-index: 100;
}

/* 表格标题粘性 */
th {
    position: sticky;
    top: 0;
    background: #f8f9fa;
}

How to implement responsive font sizes?

考察点：响应式单位。

答案：

/* 使用vw单位 */
.responsive-text {
    font-size: 4vw;  /* 视窗宽度的4% */
    min-font-size: 16px;
    max-font-size: 32px;
}

/* 使用clamp函数 */
.clamp-text {
    font-size: clamp(16px, 4vw, 32px);  /* 最小16px，最大32px */
}

/* 媒体查询 */
.text {
    font-size: 14px;
}

@media (min-width: 768px) {
    .text { font-size: 16px; }
}

@media (min-width: 1024px) {
    .text { font-size: 18px; }
}

How to define and use @keyframes animations?

考察点：关键帧动画。

答案：

/* 定义动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

/* 使用动画 */
.fade-element {
    animation: fadeIn 0.5s ease-out;
}

.slide-element {
    animation: slideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

How to optimize CSS selector performance?

考察点：性能优化。

答案：

/* 避免 - 复杂嵌套 */
div > ul > li > a { color: blue; }

/* 推荐 - 简洁选择器 */
.nav-link { color: blue; }

/* 避免 - 通配符 */
* { margin: 0; }

/* 推荐 - 具体选择器 */
h1, h2, h3, p { margin: 0; }

优化策略：

• 减少选择器层级深度
• 避免使用通配符选择器
• 使用类选择器而非标签选择器
• 避免不必要的后代选择器

What are common CSS compatibility issues? How to solve them?

考察点：兼容性处理。

答案：

/* 1. Flexbox兼容性 */
.flex-container {
    display: -webkit-box;      /* 老版webkit */
    display: -moz-box;         /* 老版gecko */
    display: -ms-flexbox;      /* IE10 */
    display: -webkit-flex;     /* 新版webkit */
    display: flex;
}

/* 2. Transform兼容性 */
.transform {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* 3. Grid兼容性 */
.grid-container {
    display: -ms-grid;  /* IE10-11 */
    display: grid;
}

解决方案：

• 使用autoprefixer自动添加前缀
• 渐进增强设计
• 使用CSS特性检测
• 提供fallback样式

How to use rem and em units? What are the differences?

考察点：单位区别。

答案：

/* rem - 相对于根元素字体大小 */
html { font-size: 16px; }

.rem-example {
    font-size: 1.2rem;    /* 16px * 1.2 = 19.2px */
    margin: 2rem;         /* 32px */
}

/* em - 相对于父元素字体大小 */
.parent {
    font-size: 20px;
}

.em-example {
    font-size: 1.2em;     /* 20px * 1.2 = 24px */
    margin: 2em;          /* 40px (基于24px) */
}

区别对比：

实际应用：

• rem用于建立全局尺寸系统
• em用于组件内部相对尺寸
• 响应式设计的单位选择
• 可访问性字体缩放支持

How to implement ellipsis for multi-line text overflow?

考察点：文本溢出。

答案：

/* 单行文本省略 */
.single-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 多行文本省略（Webkit） */
.multi-line {
    display: -webkit-box;
    -webkit-line-clamp: 3;  /* 显示3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 通用多行省略方案 */
.multi-line-fallback {
    max-height: 4.5em;  /* line-height * 行数 */
    line-height: 1.5em;
    overflow: hidden;
    position: relative;
}

.multi-line-fallback::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    background: white;
}

What are the CSS modularization solutions? What are their pros and cons?

考察点：模块化方案。

答案：

/* BEM示例 */
.card { }
.card__header { }
.card__body { }
.card--featured { }

/* CSS Modules示例 */
.container { /* 编译后: .container_3xKj9 */ }

How to use animations to enhance user experience? Give examples.

考察点：动画应用。

答案：

/* 页面加载动画 */
.page-loader {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 按钮反馈 */
.button {
    transition: all 0.2s ease;
    transform: scale(1);
}

.button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.button:active {
    transform: scale(0.98);
}

/* 表单验证提示 */
.error-message {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

How to use media queries to adapt to different devices?

考察点：设备适配。

答案：

/* 移动端优先策略 */
.container {
    padding: 15px;
    font-size: 14px;
}

/* 平板适配 */
@media (min-width: 768px) {
    .container {
        padding: 20px;
        font-size: 16px;
    }
}

/* 桌面适配 */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 30px;
    }
}

/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2) {
    .logo {
        background-image: url('[email protected]');
        background-size: contain;
    }
}

/* 打印样式 */
@media print {
    .no-print { display: none; }
    body { color: black; background: white; }
}

How to use CSS variables to improve style reusability?

考察点：CSS变量。

答案：

/* 定义全局变量 */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --border-radius: 4px;
    --spacing-unit: 8px;
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial;
}

/* 使用变量 */
.button {
    background: var(--primary-color);
    border-radius: var(--border-radius);
    padding: calc(var(--spacing-unit) * 2);
    font-family: var(--font-family);
}

/* 主题切换 */
[data-theme="dark"] {
    --primary-color: #0d6efd;
    --background-color: #1a1a1a;
    --text-color: #ffffff;
}

/* 组件级变量 */
.card {
    --card-padding: 16px;
    --card-background: #ffffff;
    
    padding: var(--card-padding);
    background: var(--card-background);
}

How to use BEM naming convention to manage styles?

考察点：BEM规范。

答案：

/* BEM结构: Block__Element--Modifier */

/* Block - 独立组件 */
.menu { }

/* Element - 组件内部元素 */
.menu__item { }
.menu__link { }
.menu__icon { }

/* Modifier - 状态或变体 */
.menu--vertical { }
.menu__item--active { }
.menu__link--disabled { }

/* 实际应用 */
.card {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.card__header {
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.card__body {
    padding: 16px;
}

.card--featured {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0,123,255,0.1);
}

How to use pseudo-classes to implement interactive effects? Give examples.

考察点：伪类交互。

答案：

/* 悬停效果 */
.button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

/* 焦点效果 */
.input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
    outline: none;
}

/* 激活效果 */
.button:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* 结构伪类 */
.list-item:nth-child(odd) {
    background-color: #f8f9fa;
}

.list-item:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.list-item:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* 表单伪类 */
.input:valid {
    border-color: #28a745;
}

.input:invalid {
    border-color: #dc3545;
}

.checkbox:checked + label::before {
    background-color: #007bff;
    content: "✓";
}

How to use transform to implement element rotation and scaling?

考察点：transform应用。

答案：

/* 基本变换 */
.rotate {
    transform: rotate(45deg);        /* 旋转45度 */
}

.scale {
    transform: scale(1.2);           /* 等比缩放1.2倍 */
    /* transform: scaleX(1.5) scaleY(0.8); 不等比缩放 */
}

/* 组合变换 */
.combo {
    transform: rotate(30deg) scale(1.1) translateX(10px);
}

/* 变换原点 */
.origin-center {
    transform-origin: center;        /* 默认值 */
    transform: rotate(45deg);
}

.origin-corner {
    transform-origin: top left;      /* 左上角为中心 */
    transform: rotate(45deg);
}

/* 3D变换 */
.rotate-3d {
    transform: rotateX(30deg) rotateY(45deg) rotateZ(60deg);
    transform-style: preserve-3d;
}

/* 动画变换 */
.animated {
    transition: transform 0.3s ease;
}

.animated:hover {
    transform: rotate(360deg) scale(1.1);
}

/* 卡片翻转效果 */
.flip-card {
    perspective: 1000px;
}

.flip-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}

What are the main features of CSS preprocessors (Sass/Less)?

考察点：预处理器功能。

答案：

// 变量
$primary-color: #007bff;
$border-radius: 4px;

// 嵌套
.nav {
  background: $primary-color;
  
  &__item {
    padding: 10px;
    
    &:hover {
      background: darken($primary-color, 10%);
    }
  }
}

// 混合器(Mixins)
@mixin button-style($bg-color: #007bff) {
  background: $bg-color;
  border: none;
  border-radius: $border-radius;
  padding: 8px 16px;
  
  &:hover {
    background: darken($bg-color, 10%);
  }
}

.primary-btn {
  @include button-style($primary-color);
}

// 继承
%button-base {
  border: none;
  padding: 8px 16px;
  border-radius: $border-radius;
}

.button {
  @extend %button-base;
  background: #007bff;
}

// 函数
@function rem($px) {
  @return $px / 16px * 1rem;
}

.text {
  font-size: rem(18px);
}

How to optimize CSS animation performance? Which properties are suitable for animations?

考察点：动画性能优化。

答案：

高性能动画属性（GPU加速）：

/* 推荐 - 只触发composite层 */
.optimized {
    /* 变换类 */
    transform: translateX(100px);
    transform: scale(1.2);
    transform: rotate(45deg);
    
    /* 透明度 */
    opacity: 0.5;
    
    /* 滤镜（现代浏览器） */
    filter: blur(5px);
}

/* 避免 - 触发layout/paint */
.avoid {
    width: 200px;          /* 触发layout */
    height: 100px;         /* 触发layout */
    left: 100px;           /* 触发layout */
    background-color: red; /* 触发paint */
}

性能优化技巧：

/* 启用硬件加速 */
.accelerated {
    will-change: transform;  /* 提前告知浏览器 */
    transform: translateZ(0); /* 强制GPU加速 */
}

/* 动画完成后清理 */
.animation-complete {
    will-change: auto;  /* 动画结束后重置 */
}

/* 使用transform代替position */
/* 慢 */
.slow {
    position: relative;
    animation: moveLeft 1s ease;
}

@keyframes moveLeft {
    to { left: 100px; }
}

/* 快 */
.fast {
    animation: moveLeftFast 1s ease;
}

@keyframes moveLeftFast {
    to { transform: translateX(100px); }
}

实际应用：

• 优先使用transform和opacity
• 避免动画width、height、position等属性
• 合理使用will-change提示浏览器
• 复杂动画考虑使用Web Animations API

How to design a scalable responsive layout system?

考察点：布局架构。

答案：

设计可扩展的响应式布局系统需要考虑断点管理、网格系统、组件适配和性能优化等多个方面。

核心架构设计：

/* 1. 统一的断点系统 */
:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

/* 2. 容器系统 */
.container {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}

@media (min-width: 768px) {
    .container { max-width: 720px; }
}

@media (min-width: 992px) {
    .container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

/* 3. 弹性网格系统 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col {
    flex: 1 0 0%;
    padding: 0 15px;
}

/* 响应式列 */
@for $i from 1 through 12 {
    .col-#{$i} { flex: 0 0 percentage($i / 12); }
    
    @media (min-width: 768px) {
        .col-md-#{$i} { flex: 0 0 percentage($i / 12); }
    }
    
    @media (min-width: 992px) {
        .col-lg-#{$i} { flex: 0 0 percentage($i / 12); }
    }
}

组件适配策略：

/* 组件响应式设计模式 */
.card {
    /* 移动端优先 */
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

@media (min-width: 768px) {
    .card {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }
}

/* 容器查询支持 */
@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: auto 1fr;
    }
}

实际应用：

• 建立统一的设计令牌系统
• 实现组件级别的响应式适配
• 提供灵活的布局组合能力
• 支持主题和国际化扩展

How to optimize the performance of complex animations?

考察点：动画性能。

答案：

/* 1. 使用transform和opacity */
.optimized-animation {
    /* 启用GPU加速 */
    will-change: transform, opacity;
    transform: translateZ(0);
    
    /* 避免layout触发 */
    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 2. 分层动画策略 */
.complex-animation {
    /* 主动画层 */
    animation: mainMove 2s ease-in-out;
}

.complex-animation::before {
    /* 背景动画层 */
    animation: backgroundFade 2s ease-in-out;
}

.complex-animation::after {
    /* 装饰动画层 */
    animation: decorationSpin 2s linear infinite;
}

/* 3. 性能监控和优化 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

How to implement complex nested layouts with grid?

考察点：grid嵌套。

答案：

/* 页面级网格布局 */
.page-grid {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 150px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

/* 主内容区的嵌套网格 */
.main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

/* 卡片内部的嵌套网格 */
.card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
}

.card-content {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 16px;
}

How to implement masonry layout with CSS?

考察点：瀑布流实现。

答案：

/* 方法1: CSS Grid (现代浏览器) */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 20px;
    gap: 16px;
}

.masonry-item {
    /* 动态计算跨越的行数 */
    grid-row-end: span var(--rows, 10);
}

/* 方法2: CSS Columns */
.masonry-columns {
    column-count: 3;
    column-gap: 16px;
    column-fill: balance;
}

.masonry-columns .item {
    break-inside: avoid;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .masonry-columns {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .masonry-columns {
        column-count: 1;
    }
}

/* 方法3: Flexbox实现 */
.masonry-flex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
    overflow: hidden;
}

.masonry-flex .item {
    width: calc(33.333% - 16px);
    margin: 8px;
}

How to implement a theme system for CSS component libraries?

考察点：主题系统设计。

答案：

/* 1. 设计令牌系统 */
:root {
    /* 颜色系统 */
    --color-primary-50: #eff6ff;
    --color-primary-500: #3b82f6;
    --color-primary-900: #1e3a8a;
    
    /* 间距系统 */
    --space-1: 0.25rem;
    --space-4: 1rem;
    --space-8: 2rem;
    
    /* 字体系统 */
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    
    /* 阴影系统 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 2. 主题变体 */
[data-theme="light"] {
    --bg-primary: var(--color-white);
    --text-primary: var(--color-gray-900);
    --border-color: var(--color-gray-200);
}

[data-theme="dark"] {
    --bg-primary: var(--color-gray-900);
    --text-primary: var(--color-white);
    --border-color: var(--color-gray-700);
}

/* 3. 组件应用主题 */
.btn {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    transition: all 0.2s ease;
}

.btn--primary {
    background: var(--color-primary-500);
    color: white;
    border-color: var(--color-primary-500);
}

How to implement theme switching with variables and functions?

考察点：主题切换。

答案：

/* CSS变量主题系统 */
:root {
    --theme-transition: all 0.3s ease;
}

.theme-light {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --accent-color: #007bff;
    --border-color: #e5e5e5;
}

.theme-dark {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --accent-color: #4dabf7;
    --border-color: #333333;
}

/* 组件应用主题 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: var(--theme-transition);
}

.card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    transition: var(--theme-transition);
}

/* JavaScript主题切换 */
/*
function toggleTheme() {
    const root = document.documentElement;
    const currentTheme = root.classList.contains('theme-dark') ? 'dark' : 'light';
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    
    root.classList.remove(`theme-${currentTheme}`);
    root.classList.add(`theme-${newTheme}`);
    
    localStorage.setItem('theme', newTheme);
}
*/

How to use CSS modularization to improve team collaboration efficiency?

考察点：模块化管理。

答案：

/* 1. 原子化CSS架构 */
/* utilities/spacing.css */
.m-1 { margin: 0.25rem; }
.p-2 { padding: 0.5rem; }
.mt-4 { margin-top: 1rem; }

/* 2. 组件化CSS */
/* components/button.css */
.btn {
    /* 基础样式 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--btn-font-size);
    border-radius: var(--btn-border-radius);
    transition: all 0.15s ease-in-out;
}

.btn--primary {
    background: var(--color-primary);
    color: white;
}

.btn--secondary {
    background: var(--color-secondary);
    color: white;
}

/* 3. BEM命名规范 */
.search-form { }
.search-form__input { }
.search-form__button { }
.search-form--compact { }

/* 4. CSS模块文件组织 */
/*
styles/
├── abstracts/          # 变量、函数、mixins
│   ├── _variables.scss
│   ├── _functions.scss
│   └── _mixins.scss
├── base/              # 基础样式
│   ├── _reset.scss
│   └── _typography.scss
├── components/        # 组件样式
│   ├── _button.scss
│   └── _card.scss
├── layout/           # 布局样式
│   ├── _header.scss
│   └── _grid.scss
├── pages/            # 页面特定样式
└── utilities/        # 工具类
    └── _spacing.scss
*/

How to combine animation with JS to implement complex interactions?

考察点：动画与JS结合。

答案：

/* CSS动画定义 */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-slide-in-up {
    animation: slideInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* 状态类 */
.is-loading {
    pointer-events: none;
    opacity: 0.6;
}

.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.is-hidden {
    opacity: 0;
    transform: translateY(-20px);
}

/* JavaScript交互示例 */
/*
class AnimationController {
    constructor() {
        this.observers = new Set();
        this.setupIntersectionObserver();
    }
    
    // 滚动触发动画
    setupIntersectionObserver() {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-slide-in-up');
                }
            });
        }, { threshold: 0.1 });
        
        document.querySelectorAll('.animate-on-scroll').forEach(el => {
            observer.observe(el);
        });
    }
    
    // 序列动画
    async sequenceAnimation(elements, delay = 100) {
        for (let i = 0; i < elements.length; i++) {
            elements[i].style.animationDelay = `${i * delay}ms`;
            elements[i].classList.add('animate-slide-in-up');
            await new Promise(resolve => setTimeout(resolve, delay));
        }
    }
}
*/

How to analyze and resolve CSS rendering performance bottlenecks?

考察点：性能分析。

答案：

/* 1. 优化选择器性能 */
/* 避免 - 复杂选择器 */
.container div.content ul li a.link { }

/* 推荐 - 简洁选择器 */
.nav-link { }

/* 2. 减少重排和重绘 */
/* 避免 - 触发layout的属性 */
.bad-performance {
    width: 200px;        /* 触发layout */
    height: 100px;       /* 触发layout */
    padding: 10px;       /* 触发layout */
    margin: 5px;         /* 触发layout */
}

/* 推荐 - 使用transform和opacity */
.good-performance {
    transform: scale(1.1) translateX(20px);  /* 只触发composite */
    opacity: 0.8;                            /* 只触发composite */
}

/* 3. 合理使用will-change */
.optimize-layer {
    will-change: transform;  /* 提前创建合成层 */
}

.animation-complete {
    will-change: auto;      /* 动画完成后移除 */
}

/* 4. 批量DOM操作的CSS */
.batch-update {
    /* 使用CSS变量批量更新 */
    background: var(--dynamic-bg);
    color: var(--dynamic-text);
    transform: var(--dynamic-transform);
}

/* 5. 关键渲染路径优化 */
/* 内联关键CSS */
.above-fold {
    /* 首屏关键样式 */
    display: block;
    position: relative;
    background: white;
}

/* 6. 使用contain属性 */
.isolated-component {
    contain: layout style paint;  /* 限制影响范围 */
}

性能分析工具和方法：

• Chrome DevTools的Performance面板
• 监控FPS和渲染时间
• 分析Layout、Paint和Composite层
• 使用CSS Triggers网站查询属性影响

How to implement adaptive components with media queries and container queries?

考察点：自适应组件。

答案：

/* 传统媒体查询 - 基于视窗 */
.responsive-card {
    padding: 16px;
    background: white;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .responsive-card {
        padding: 24px;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 16px;
    }
}

/* 容器查询 - 基于父容器 */
.adaptive-component {
    container-type: inline-size;
    container-name: card;
}

@container card (min-width: 400px) {
    .card-content {
        display: flex;
        align-items: center;
        gap: 16px;
    }
}

@container card (min-width: 600px) {
    .card-content {
        grid-template-columns: 200px 1fr;
    }
    
    .card-image {
        aspect-ratio: 16/9;
    }
}

/* 混合查询策略 */
.smart-component {
    /* 默认移动端样式 */
    display: block;
}

/* 容器查询：组件内部适配 */
@container (min-width: 300px) {
    .smart-component {
        display: flex;
        flex-wrap: wrap;
    }
}

/* 媒体查询：全局断点适配 */
@media (min-width: 768px) {
    .smart-component {
        max-width: none;
    }
}

/* 实用的组件查询模式 */
.sidebar {
    container-type: inline-size;
}

@container (max-width: 200px) {
    .sidebar-nav {
        /* 窄侧边栏：只显示图标 */
        .nav-text { display: none; }
        .nav-icon { margin: 0; }
    }
}

@container (min-width: 250px) {
    .sidebar-nav {
        /* 宽侧边栏：显示图标和文字 */
        .nav-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
    }
}

实际应用：

• 组件级别的响应式设计
• 复用组件的多场景适配
• 减少对全局断点的依赖
• 提升组件的独立性和可维护性

How to implement maintainable large project style architecture with BEM and CSS variables?

考察点：架构设计。

答案：

/* 1. 设计系统基础变量 */
:root {
    /* 颜色系统 */
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;
    
    /* 间距系统 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;
    
    /* 字体系统 */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
}

/* 2. BEM组件架构 */
/* Block: 独立的组件 */
.navigation {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--color-primary);
    
    /* 组件级变量 */
    --navigation-height: 60px;
    --navigation-z-index: 1000;
}

/* Element: 组件内部元素 */
.navigation__logo {
    height: calc(var(--navigation-height) - var(--spacing-md));
    margin-right: var(--spacing-lg);
}

.navigation__menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation__item {
    margin-right: var(--spacing-md);
}

.navigation__link {
    color: white;
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

/* Modifier: 状态和变体 */
.navigation--transparent {
    background: transparent;
    backdrop-filter: blur(10px);
}

.navigation__link--active {
    background: rgba(255, 255, 255, 0.2);
}

.navigation__link--disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* 3. 主题系统集成 */
[data-theme="dark"] {
    --color-primary: #0d6efd;
    --color-bg: #1a1a1a;
    --color-text: #ffffff;
}

.navigation {
    background: var(--color-primary);
    color: var(--color-text);
}

/* 4. 响应式变量 */
@media (max-width: 768px) {
    :root {
        --spacing-md: 0.75rem;
        --navigation-height: 50px;
    }
    
    .navigation--mobile {
        flex-direction: column;
        align-items: stretch;
    }
}

How to implement complex SVG animations with CSS?

考察点：SVG动画。

答案：

/* 1. SVG路径动画 */
.draw-svg {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawPath 3s ease-in-out forwards;
}

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

/* 2. SVG变换动画 */
.rotating-icon {
    transform-origin: center;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 3. 复杂SVG动画组合 */
.complex-svg-animation {
    /* 主图形动画 */
    .main-shape {
        animation: morphShape 4s ease-in-out infinite;
    }
    
    /* 装饰元素动画 */
    .decoration {
        animation: floatUp 2s ease-in-out infinite alternate;
    }
    
    /* 文字路径动画 */
    .text-path {
        stroke-dasharray: 500;
        stroke-dashoffset: 500;
        animation: writeText 3s ease-out 1s forwards;
    }
}

@keyframes morphShape {
    0%, 100% { d: path('M10,10 L50,10 L50,50 L10,50 Z'); }
    50% { d: path('M10,30 L30,10 L50,30 L30,50 Z'); }
}

@keyframes floatUp {
    from { transform: translateY(0) scale(1); opacity: 0.7; }
    to { transform: translateY(-20px) scale(1.1); opacity: 1; }
}

@keyframes writeText {
    to { stroke-dashoffset: 0; }
}

How to implement multi-level visual effects with CSS?

考察点：视觉动效。

答案：

/* 1. 分层动画系统 */
.multi-layer-effect {
    position: relative;
    overflow: hidden;
}

/* 背景层动画 */
.multi-layer-effect::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 3s ease-in-out infinite;
    z-index: 1;
}

/* 内容层动画 */
.multi-layer-effect .content {
    position: relative;
    z-index: 2;
    animation: contentFloat 4s ease-in-out infinite;
}

/* 装饰层动画 */
.multi-layer-effect::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: decorationPulse 2s ease-in-out infinite;
    z-index: 3;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(200%) translateY(200%) rotate(45deg); }
}

@keyframes contentFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes decorationPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.5); opacity: 1; }
}

/* 2. 交互触发的层次动画 */
.interactive-layers:hover {
    .layer-1 { animation: layer1Expand 0.3s ease-out forwards; }
    .layer-2 { animation: layer2Slide 0.3s ease-out 0.1s forwards; }
    .layer-3 { animation: layer3Fade 0.3s ease-out 0.2s forwards; }
}

How to improve first-screen rendering speed with CSS?

考察点：首屏优化。

答案：

/* 1. 关键CSS内联 */
/* 首屏关键样式应内联到HTML中 */
.above-fold {
    display: block;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

/* 2. 字体加载优化 */
@font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
    font-display: swap; /* 使用系统字体先渲染，自定义字体后替换 */
}

/* 3. 图片占位和懒加载 */
.image-placeholder {
    background: #f0f0f0;
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazy-image.loaded {
    opacity: 1;
}

/* 4. 避免layout shift */
.container {
    /* 预设尺寸避免布局偏移 */
    min-height: 100vh;
}

.skeleton {
    /* 骨架屏占位 */
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 5. 优化重排和重绘 */
.optimized-animation {
    /* 使用transform代替position变化 */
    transform: translateX(0);
    transition: transform 0.3s ease;
}

.optimized-animation.active {
    transform: translateX(100px);
}

/* 6. 资源优先级提示 */
/*
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
*/

How to combine CSS with frameworks (like React/Vue) to implement dynamic styles?

考察点：框架结合。

答案：

/* 1. CSS Modules方式 */
.container {
    padding: 20px;
    background: white;
    border-radius: 8px;
}

.container.dark {
    background: #1a1a1a;
    color: white;
}

.title {
    font-size: 24px;
    margin-bottom: 16px;
}

/* React组件中使用 */
/*
import styles from './Component.module.css';

function Component({ isDark, title }) {
    return (
        <div className={`${styles.container} ${isDark ? styles.dark : ''}`}>
            <h1 className={styles.title}>{title}</h1>
        </div>
    );
}
*/

/* 2. CSS变量动态控制 */
.dynamic-component {
    background: var(--dynamic-bg, #ffffff);
    color: var(--dynamic-text, #000000);
    padding: var(--dynamic-spacing, 16px);
    transform: var(--dynamic-transform, none);
    transition: all 0.3s ease;
}

/* React中动态设置CSS变量 */
/*
function DynamicComponent({ theme, size, offset }) {
    const style = {
        '--dynamic-bg': theme.background,
        '--dynamic-text': theme.text,
        '--dynamic-spacing': `${size}px`,
        '--dynamic-transform': `translateX(${offset}px)`
    };
    
    return (
        <div className="dynamic-component" style={style}>
            Dynamic Content
        </div>
    );
}
*/

/* 3. Styled Components方式 */
/*
const StyledButton = styled.button`
    background: ${props => props.primary ? '#007bff' : '#6c757d'};
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    
    &:hover {
        background: ${props => props.primary ? '#0056b3' : '#545b62'};
        transform: translateY(-2px);
    }
    
    ${props => props.size === 'large' && `
        padding: 12px 24px;
        font-size: 18px;
    `}
`;
*/

/* 4. Vue中的动态样式 */
/*
<template>
    <div 
        :class="['component', { 'component--active': isActive }]"
        :style="{ 
            '--theme-color': themeColor,
            '--component-size': componentSize + 'px'
        }"
    >
        <transition name="slide">
            <div v-if="visible" class="content">
                Content
            </div>
        </transition>
    </div>
</template>
*/

.slide-enter-active, .slide-leave-active {
    transition: all 0.3s ease;
}

.slide-enter-from, .slide-leave-to {
    transform: translateX(-100%);
    opacity: 0;
}

How to implement complex 3D transformation effects with CSS?

考察点：3D变换。

答案：

/* 1. 3D空间设置 */
.scene {
    perspective: 1000px;
    perspective-origin: center center;
}

.cube {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotateCube 10s linear infinite;
}

/* 2. 3D立方体 */
.cube-face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 0, 0, 0.7);
    border: 2px solid white;
}

.cube-face.front { transform: rotateY(0deg) translateZ(100px); }
.cube-face.back { transform: rotateY(180deg) translateZ(100px); }
.cube-face.right { transform: rotateY(90deg) translateZ(100px); }
.cube-face.left { transform: rotateY(-90deg) translateZ(100px); }
.cube-face.top { transform: rotateX(90deg) translateZ(100px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes rotateCube {
    0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

/* 3. 3D卡片翻转 */
.flip-card-3d {
    perspective: 1000px;
    width: 300px;
    height: 200px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card-3d:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* 4. 3D滚动视差 */
.parallax-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.parallax-layer.back {
    transform: translateZ(-300px) scale(1.3);
}

.parallax-layer.middle {
    transform: translateZ(-150px) scale(1.15);
}

.parallax-layer.front {
    transform: translateZ(0);
}

How to design a maintainable CSS architecture? What are the design principles?

考察点：CSS架构设计。

答案：

核心设计原则：

/* 1. 单一职责原则 */
/* 每个类只负责一个功能 */
.btn { /* 基础按钮样式 */ }
.btn--primary { /* 主要按钮变体 */ }
.btn--large { /* 大尺寸按钮 */ }

/* 2. 开放封闭原则 */
/* 对扩展开放，对修改封闭 */
.card {
    /* 基础卡片样式，不随意修改 */
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card--featured {
    /* 通过扩展添加新特性 */
    border: 2px solid var(--color-primary);
}

/* 3. 依赖倒置原则 */
/* 依赖抽象（变量）而非具体值 */
:root {
    --color-primary: #007bff;
    --spacing-unit: 8px;
    --border-radius: 4px;
}

.component {
    background: var(--color-primary);
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
}

架构层级设计：

styles/
├── 1-settings/          # 设计令牌
│   ├── _variables.scss  # 颜色、字体、间距等变量
│   └── _config.scss     # 配置选项
├── 2-tools/            # 工具函数
│   ├── _functions.scss  # SCSS函数
│   └── _mixins.scss     # 可复用的mixins
├── 3-generic/          # 通用样式
│   ├── _normalize.scss  # 样式重置
│   └── _box-sizing.scss # 盒模型设置
├── 4-elements/         # 元素样式
│   ├── _typography.scss # 排版
│   └── _forms.scss      # 表单元素
├── 5-objects/          # 布局对象
│   ├── _grid.scss       # 网格系统
│   └── _layout.scss     # 布局类
├── 6-components/       # UI组件
│   ├── _button.scss     # 按钮组件
│   ├── _card.scss       # 卡片组件
│   └── _modal.scss      # 模态框组件
├── 7-utilities/        # 工具类
│   ├── _spacing.scss    # 间距工具类
│   └── _display.scss    # 显示工具类
└── main.scss           # 主入口文件

命名规范：

/* BEM命名规范 */
.block { }                    /* 组件块 */
.block__element { }           /* 组件元素 */
.block--modifier { }          /* 组件修饰符 */
.block__element--modifier { } /* 元素修饰符 */

/* 工具类命名 */
.u-margin-bottom-large { }    /* 工具类前缀 u- */
.o-grid { }                   /* 对象类前缀 o- */
.c-button { }                 /* 组件类前缀 c- */
.is-active { }                /* 状态类前缀 is- */
.has-dropdown { }             /* 特征类前缀 has- */

可维护性最佳实践：

• 模块化：按功能拆分样式文件
• 组件化：每个组件独立维护样式
• 标准化：统一命名规范和代码风格
• 文档化：提供清晰的使用文档和示例
• 测试化：建立样式回归测试机制
• 自动化：使用工具检查代码质量

实际应用：

• 大型团队项目的样式管理
• 组件库的架构设计
• 多项目间的样式复用
• 长期项目的可持续维护