CSS学习目录
前面的話
CSS是前端工程師的基本功,但好多執迷于學習javascript的人的基本功并不扎實。可能一些人從w3school網站匆匆過了一遍,只是對CSS常用概念有一些表面上的理解,就一頭扎進javascript的深坑里跳不出來。實際上,javascript中比較復雜的邏輯很有可能使用CSS幾行樣式就能解決問題,而且性能還好。
CSS之所以能成為一門優雅的語言,以及有其對應的重構工程師的崗位,是因為這本語言本身就有很強的存在價值,且真正要理解它并不容易。從CSS禪意花園開始,寫CSS成為一種藝術。從CSS2.1到3再到4,CSS所涵蓋的內容及可實現的功能得到了極大的豐富,使得CSS的學習成本也越來越高。再多的知識,一個知識點一個知識點去學,總能學明白。
小火柴將CSS的知識體系進行了梳理和歸納,總結成以下目錄
?
基礎
基礎語法
引入CSS
選擇器
選擇器新用法
層疊
單位
樣式關鍵字
calc()
默認可繼承樣式
CSS Why
變量Variable
屬性速查表
?
兼容
CSS?Hack
CSS兼容性詳解
haslayout
?
偽類偽元素
偽元素
計數器
偽類
?
規范
CSS reset
CSS命名實踐
CSS規范
命名規范
CSS編碼技巧
代碼檢查工具stylelint?
布局
盒模型
【盒子尺寸】
盒模型
四個自適應寬高關鍵字
邊框和陰影
margin要點
margin負值
輪廓outline
【彈性盒模型】
彈性盒模型flex
舊版flex及兼容
flex布局應用
【盒子顯示】
溢出overflow
裁剪clip
拉伸resize
滾動條
可見性visibility
?
普通流
display
haslayout
BFC
視覺格式化
文本方向
?
浮動和定位
【浮動】
浮動
清浮動
【定位】
定位中的偏移
定位中的堆疊z-index
絕對定位
絕對定位應用
相對定位和固定定位
?
布局方式
【布局系統】
Media媒體查詢
多列布局
grid柵格布局
移動優先的響應式布局
【居中布局】
水平居中
垂直居中
水平垂直居中
【常見布局】
兩端對齊
單列定寬單列自適應布局
兩列自適應布局
三列布局
三欄式布局(所謂的圣杯和雙飛翼布局)
等分布局
等高布局
全屏布局
sticky-footer布局
?
渲染
字體和文本
字體
? ?基礎文本樣式
行高與垂直對齊
換行和空白符
文本溢出和文本陰影
?
顏色和背景
顏色模式
顏色模式轉換器
前景色和透明度
背景
光標
?
變形和動畫
過渡transition
變形transform(2d)
變形transform(3d)
變形transform的副作用
線性漸變
徑向漸變
動畫animation
動畫animation的三個應用(漂浮的白云、旋轉的星球和正方體合成)
animate.css的使用
?
渲染屬性
混合模式
濾鏡
倒影
頁面渲染優化屬性will-change
遮罩mask
路徑裁剪clip-path
?
效果
元素顯示隱藏的9種思路
實現滑動門的3種方法
CSS以圖換字的9種方法
導航條Tab切換
CSS畫出的圖
紋理文本
CSS文本效果
CSS邊框效果
CSS背景效果
CSS遮罩和毛玻璃效果
轉載于:https://www.cnblogs.com/xiaohuochai/p/5249139.html
總結
- 上一篇: PHP书写格式
- 下一篇: CSS :hover 选择器