CSS 知识点

基础选择器

• 元素选择器（如 p）
• 类选择器（如 .class）
• ID选择器（如 #id）
• 属性选择器（如 [type="text"]）
• 伪类选择器（如 :hover, :first-child）
• 伪元素选择器（如 ::before, ::after）

盒模型

• 理解margin, border, padding, content之间的关系
• 如何使用盒模型控制元素的尺寸和布局

布局 & 定位

• margin 纵向重叠的问题

• margin 负值的问题

• BFC 理解和应用

• 浮动（float）和清除浮动（clear），clearfix

• 定位（position）：static, relative, absolute, fixed, sticky

• Flexbox（弹性盒子布局）

  一劳永逸的搞定 flex 布局 (opens new window)

• Grid（网格布局）

  最强大的 CSS 布局 —— Grid 布局 (opens new window)

• 多列布局（multi-column layout）

响应式设计

• 媒体查询（media queries）
• 使用视口单位（如vw, vh）
• 移动优先策略
• rem 和 em
• 如何实现响应式

文本样式

• 字体（font-family, font-size, font-weight等）
• 文本对齐（text-align）、缩进（text-indent）、装饰（text-decoration）等
• 行高（line-height）、继承的问题
• 颜色值（如hex, rgb, rgba, hsl, hsla）
• 渐变（gradients）
• 图片和颜色作为背景

过渡与动画

• 过渡（transition）：属性、持续时间、延迟、速度曲线
• 动画（animation）：关键帧（@keyframes）、迭代次数、方向等

CSS预处理器

• SASS/SCSS, LESS, Stylus等
• 变量、嵌套规则、混合（mixins）、函数等高级功能

性能优化

• 减少重绘和回流
• 使用CSS Sprites减少HTTP请求
• 媒体查询和图片加载策略

​ CSS性能优化的8个技巧 (opens new window)

浏览器兼容性

• 不同浏览器之间的差异
• 使用前缀解决兼容性问题（如-webkit-, -moz-）
• 使用Autoprefixer等工具自动处理前缀

现代CSS特性

• CSS变量（custom properties）
• CSS容器查询（container queries）
• CSS滚动条样式定制
• CSS形状（shapes）

调试技巧

• 使用开发者工具检查和修改CSS
• 理解CSS继承和层叠规则

BFC