一、基础概念
- CSS的全称及作用是什么?
- 行内样式、内部样式表、外部样式表的优先级?
- 解释CSS的层叠性(Cascading)
- CSS选择器优先级计算规则
- 伪类与伪元素的区别?举例说明
!important
的作用及使用注意事项- 如何继承父元素字体大小但避免继承其他属性?
- CSS变量(Custom Properties)的定义与使用场景
- 媒体查询(
@media
)的常见应用场景 - CSS预处理器(Sass/Less)的核心优势
二、盒模型与布局
- 标准盒模型 vs 怪异盒模型的区别
- 如何通过
box-sizing
控制盒模型? - 块级元素与行内元素的区别及常见标签
- 水平居中的5种实现方式
- 垂直居中的6种经典方案(Flex/Grid/定位等)
- BFC(块级格式化上下文)的触发条件与作用
- 清除浮动的原理与方法
margin
塌陷问题及解决方案position
各属性值的区别与应用场景z-index
工作原理及层叠上下文
三、Flexbox布局
- Flex容器与项目的核心属性
- 如何实现两端对齐布局?
flex: 1
的含义分解flex-grow
与flex-shrink
的计算规则- 实现圣杯布局的Flex方案
align-items
与align-content
的区别- 如何控制Flex项目的换行行为?
- Flex实现等高列布局的方法
- 绝对定位元素在Flex容器中的表现
- Flex布局的浏览器兼容性问题
四、Grid布局
- Grid布局的核心概念(轨道、单元格等)
- 显式网格与隐式网格的区别
fr
单位的计算规则- 实现12列网格布局的Grid方案
grid-area
的简写规则- 如何实现自适应图片画廊布局?
- Grid的自动排列(
auto-fit
vsauto-fill
) - 使用Grid实现圣杯布局
- 子网格(
subgrid
)的应用场景 - Grid与Flexbox的选择依据
五、响应式设计
- 移动优先(Mobile First)的设计原则
- 视口(viewport)的meta标签配置
- 响应式图片的实现方案(srcset/sizes)
- 媒体查询中
min-width
与max-width
的匹配规则 - 隐藏元素的多种方法及区别(
display
/visibility
/opacity) - 移动端1像素边框问题的解决方案
- 如何实现自适应正方形元素?
- 移动端点击延迟问题与解决方案
- REM布局的原理与实现步骤
- 响应式表格的优化策略
六、动画与过渡
transition
与animation
的区别- 如何实现无限循环动画?
- 贝塞尔曲线(cubic-bezier)的作用
- 硬件加速的原理与实现方式
will-change
属性的优化作用- 实现淡入淡出动画的两种方式
- 关键帧动画的百分比控制技巧
- 如何暂停CSS动画?
steps()
函数在帧动画中的应用- 动画性能优化注意事项
七、CSS进阶
- CSS模块化的实现方案(BEM/CSS Modules)
- 伪元素
::before
和::after
的常见用法 - CSS计数器(counter)的应用场景
- 自定义滚动条样式的方法
- 实现毛玻璃效果(backdrop-filter)
- CSS混合模式(mix-blend-mode)的用法
- 如何实现文字渐变色效果?
- 剪切路径(clip-path)的创意应用
- CSS自定义属性实现主题切换
- 使用
@supports
进行特性检测
八、性能与优化
- 哪些CSS属性会导致重排(Reflow)?
- 如何减少页面重绘(Repaint)?
- 使用
content-visibility
优化渲染性能 - 优化CSS选择器性能的规则
- 如何减少CSS文件体积?
- 异步加载CSS的方法
- 关键CSS(Critical CSS)的提取策略
- 预加载CSS资源的实现方式
- 浏览器渲染流程中CSS的阻塞行为
- CSS与GPU加速的适用场景
九、调试与兼容性
- 处理CSS样式不生效的调试步骤
- 浏览器私有前缀的作用与处理方案
- CSS Reset与Normalize.css的区别
- 多行文本溢出显示省略号的实现
- 解决iOS滑动卡顿的
-webkit-overflow-scrolling
- 处理Safari字体渲染差异的方法
- 检测并修复z-index层级混乱
- 移动端输入框聚焦样式问题处理
- 使用Feature Queries处理渐进增强
- 常见CSS Hacks技术(已过时,了解即可)
十、综合应用
- 实现一个三角形图标
- 纯CSS实现下拉菜单
- 实现吸顶(sticky)导航栏
- 自定义radio/checkbox样式
- 实现无限滚动的加载动画
- 构建响应式卡片网格布局
- 设计一个模态框(Modal)
- 制作平滑滚动锚点链接
- 实现图片懒加载的CSS辅助方案
- CSS最新特性(如:has()、容器查询)的了解程度
建议练习方式:
- 按模块逐个击破,手写代码验证
- 结合CodePen/Sandbox进行可视化调试
- 思考不同方案的优缺点及适用场景
- 关注CSS新特性规范(MDN文档)