學習條件
- 了解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前端自動化工具
