开卷考试怎么打（HTML5/CSS3 专用）
开卷不是"不用学"，是换一种能力：从"记得住"变成"翻得到、用得上、写得快"。
题量大 + 有时间限制，翻书翻不明白的人，开卷也是低分。
一、开卷考的是三种能力
| 能力 | 怎么准备 |
|---|
| 定位：知道这个知识点在书哪一章 | 书里贴标签、折角，做一张「关键词 → 页码」表 |
| 套用：会算、会对比、会写代码 | 练手写模板，练到不看书也能写 |
| 判断：知道该用哪个属性 | 记住"效果 → 属性"的反查表 |
二、必做的三张 A4
表 1：标签表
| 类别 | 标签 | 备注 |
|---|
| 块级 | div p h1~h6 ul ol li dl table form | 独占一行、可设宽高 |
| 行内 | span a strong em b i u s del ins | 一行多个、宽高无效 |
| 行内块 | img input button | 一行多个、可设宽高 |
表 2：CSS 属性反查表
| 想做什么 | 用什么 |
|---|
| 居中（水平） | margin: 0 auto |
| 居中（水平垂直） | absolute + transform: translate(-50%,-50%) |
| 三栏（左右定宽） | 浮动 或 flex |
| 固定导航 | position: fixed; top:0 |
| 圆角 / 阴影 | border-radius / box-shadow |
| 悬停变色 | transition + :hover |
| 旋转/缩放 | transform: rotate()/scale() |
| 循环动画 | @keyframes + animation |
| 清除浮动 | overflow:hidden 或 ::after{clear:both} |
| 显示/隐藏 | display:none / visibility:hidden |
表 3：计算公式
盒子总宽 = width + padding×2 + border×2 （不含 margin）
box-sizing:border-box 时：width 已包含 padding 和 border
优先级分值：!important > 行内(1000) > id(100) > class(10) > 标签(1) > *(0)
nth-child：2n=偶数、2n+1/odd=奇数、3n+1=第1、4、7…
三、书怎么弄（10 分钟搞定）
- 折角：第 5 章盒模型、第 7 章表单、第 8 章布局、第 10 章动画
- 贴便利贴：每章侧面写关键词（盒模型/表单/浮动/定位/动画）
- 首页写目录页：把这四章的起始页码写在封面内页
- 别带多余的书：带教材 + 你的三张 A4 就够
四、考试节奏（按 120 分钟算）
| 时间 | 做什么 |
|---|
| 0~5 分 | 通卷扫一遍，标出"会的 / 要翻书的 / 不会的" |
| 5~40 分 | 先把会的写完（别在难题上耗） |
| 40~90 分 | 逐题翻书，先做计算题和简答题（好拿分） |
| 90~110 分 | 手写代码题（布局/表单/动画），按模板写 |
| 110~120 分 | 检查：有没有漏题、代码有没有漏 }、属性名拼错没 |
五、开卷最容易踩的坑
- 翻书太慢：不知道在第几章，翻 5 分钟就慌了 → 必须提前贴标签
- 抄错属性名：
paddding、boder、backgroud → 抄完回头扫一眼
- 只抄不理解：问"为什么"的题（为什么清除浮动）抄不到答案，得自己说一句
- 代码题写不完：开卷也来不及现编，必须提前练手写
- 忘写单位：
width: 200 不加 px → 无效
- 选择器写错层级：
.nav li 和 .nav > li 不一样，看清楚
六、开卷也不会考太深，抓住这些就够了
- 标签分类（块/行内/行内块）
- 选择器优先级计算
- 盒模型计算 +
box-sizing
- 浮动与清除浮动（为什么、怎么做）
- 定位四种 + 子绝父相
- 表单控件（写注册页）
- 过渡与动画的区别
- 两列/三栏布局手写
这 8 个点占 70% 的分。剩下 30% 靠翻书找细节。
七、配套练习（3 天练完）
| 天 | 练什么 | 标准 |
|---|
| D1 | 盒模型计算 5 题 + 优先级计算 10 题 | 全对 |
| D2 | 手写：三栏布局、导航栏、卡片 | 不看书能写完 |
| D3 | 手写：注册表单、简单动画 | 不看书能写完 |
开卷考高分的人，都是考前把这些练到不用翻书，考试时只翻"忘了的细节"。