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遮罩和毛玻璃效果