CSS 基础概念
- CSS 的定义与作用
- CSS 与 HTML 的关系
- 内联样式、内部样式表与外部样式表的区别
CSS 选择器
- 基本选择器(标签、类、ID)
- 组合选择器(后代、子代、相邻兄弟)
- 伪类与伪元素选择器
- 属性选择器
CSS 盒模型
- 标准盒模型与 IE 盒模型
- 内容(content)、内边距(padding)、边框(border)、外边距(margin)
- box-sizing 属性的作用
CSS 布局技术
- 浮动(float)与清除浮动(clear)
- 定位(position: static, relative, absolute, fixed, sticky)
- Flexbox 布局(flex-direction, justify-content, align-items)
- Grid 布局(grid-template-columns, grid-gap, grid-area)
CSS 动画与过渡
- transition 属性的使用(transition-property, duration, timing-function)
- keyframes 动画(@keyframes, animation-name, duration, iteration-count)
- 常见动画效果示例(淡入淡出、滑动、旋转)
CSS 响应式设计
- 媒体查询(@media)的语法与应用
- 移动优先(Mobile First)设计原则
- 视口(viewport)与 REM/EM 单位
CSS 预处理器与框架
- Sass/SCSS 基础语法(变量、嵌套、混合)
- Less 与 Stylus 简介
- Bootstrap 与 Tailwind CSS 的对比
CSS 性能优化
- 减少选择器复杂度
- 避免过度使用高开销属性(box-shadow, filter)
- 使用 CSS 压缩工具(如 PurgeCSS)
CSS 未来发展趋势
- CSS 新特性(Container Queries, Subgrid, :has() 选择器)
- Web 组件与 Shadow DOM 中的 CSS 作用域
- CSS 与 JavaScript 的交互(CSS-in-JS 方案)
总结与学习资源
- 推荐书籍、在线教程与社区
- 常见 CSS 面试题解析
- 实战练习建议