学习条件
- 了解CSS样式基础
- 了解样式选择器及生效规则
- 了解Float/Flex基本布局
学习目标
- 学会使用Normalize.css和Reset.css重置浏览器默认样式
- 理解标准W3C盒子模型和IE盒子模型
- 了解CSS后处理器的作用
学习资源
- 理解标准W3C盒子模型和IE盒子模型
- 浏览器默认样式对比表
- Normalize.css
- Reset.css
- 浏览器兼容性问题及解决方案(CSS部分)
- CSS预处理器框架与CSS后后处理器框架
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型
习题
习题一: 尝试在不用浏览器运行下面的代码
下面的CSS代码是符合W3C标准的代码，其作用是为元素添加无限旋转的动画。请尝试在不同浏览器中运行，观察是否能如期执行，如果不能如期执行请找原因并修复。
/*无限旋转*/
.revolve{
animation: revolve 2s linear infinite;
}
@keyframes revolve {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
提示：通过后处理器(例如：Autoprefixer)为代码增加兼容性前缀，例如：“-webkit-”
下面可以学
- Flex布局
- Gulp前端自动化工具
