1. 盒子模型（必考）
- 标准盒模型：
width = content - IE 盒模型：
width = content + padding + border - 统一用：
box-sizing: border-box
2. 选择器优先级（必考）
!important> 行内样式 > ID > 类 / 伪类 > 标签- 权重：ID (100) > 类 (10) > 标签 (1)
3. 布局相关
（1）BFC
作用：解决浮动塌陷、margin 重叠 触发：overflow:hidden、float、absolute、flex
（2）水平垂直居中（必考）
- flex
css
display: flex;
justify-content: center;
align-items: center;- 定位 + transform
css
position: absolute;
left:50%; top:50%;
transform: translate(-50%,-50%);（3）Flex 布局（高频）
- 主轴：
justify-content - 交叉轴：
align-items - 换行：
flex-wrap: wrap - 占满剩余：
flex:1
4. 定位 position（必考）
static默认relative相对自己absolute相对最近非 static 父级fixed固定在屏幕sticky吸顶
5. 浮动与清除浮动
- 浮动：
float:left/right - 清除浮动（必背）
css
.clearfix::after{
content:'';
display:block;
clear:both;
}6. 常见伪类与结构伪类
:hover鼠标悬浮:active点击nth-child(n)第 n 个子元素first-child/last-child
7. 重绘与重排（高频）
- 重排（回流）：改布局（宽高、位置、display）
- 重绘：改颜色、背景
- 优化：用
transform、opacity不触发重排
8. 常见区别题
- display:none vs visibility:hidden
- none：不占空间，重排
- hidden：占空间，只重绘
- em vs rem
- em：相对父元素字体大小
- rem：相对根元素 html 字体大小
- link vs @import
- link 并行加载，@import 等页面加载完
- link 可以加载图标，@import 不行
9. 移动端适配
vw/vh：视口单位rem适配- flex 布局
10. CSS3 新特性
transition过渡animation动画transform：位移、旋转、缩放border-radius、box-shadow、rgba
如果你要，我可以再给你整理成超精简背诵版（10 条口诀），考试直接默写。
属性值的单位
这里是CSS 属性值单位 常考 + 必背，按考试频率整理，直接记这些就够。
一、绝对单位（固定大小）
- px：像素，最常用
- cm /mm/in：印刷用，网页几乎不用
二、相对单位（最常考）
1. 字体相关
- em
- 相对于自身 font-size
- 没设置则继承父元素字体大小
- rem
- 相对于根元素 html 的 font-size
- 移动端适配常用
2. 视口单位（高频）
- vw：视口宽度的 1%
- vh：视口高度的 1%
- vmin /vmax：较少考
3. 百分比 %
- 宽高：相对父容器
- 行高、margin、padding：也常用 %
- 定位：top/left 相对父级
三、颜色单位（必考）
- 英文单词：red / blue
- 十六进制：#fff / #ff0000 / #f008
- rgb / rgba ：rgb(255,0,0)、rgba(0,0,0,0.5)
- a 代表透明度 0~1
- hsl /hsla：了解即可
四、透明度
- opacity: 0~1
- rgba 里的 alpha
五、时间单位（动画 / 过渡必考）
- s：秒
- ms：毫秒例：transition: all 0.3s;
六、角度单位（transform 用）
- deg：度数（rotate (45deg)）
七、行高单位
- 纯数字：
line-height: 1.5表示是字体大小的 1.5 倍（最推荐） - px /em/ % 也可以
超精简背诵版（考试直接写）
- px：固定像素
- %：相对父元素
- em：相对自身 / 父字体
- rem：相对根字体
- vw/vh：相对屏幕
- s/ms：时间
- deg：角度
- rgba：带透明颜色