你未必知道的49個CSS知識點

本文的每一條，都是我曾經發過的掘金沸點，其中有不少條超過了百贊（竊喜）。

鑑於時不時有童鞋翻我之前的沸點，所以，本文收集了我的目前發過的全部CSS知識點動圖，以便閱讀。

須要說明的是，順序還是按當時發佈順序羅列的，尚未系統的總結，多多包涵。

另外這裏，老姚謝謝各位一如既往的支持。😘😘😘

01.【負邊距】💘負邊距的效果。注意左右負邊距表現並不一致。左爲負時，是左移，右爲負時，是左拉。上下與左右相似

02.【shape-outside】❤不要自覺得是了。你覺得本身是方的，在別人眼裏你倒是圓的

03.【BFC應用】💓BFC應用之阻止外邊距合併（margin collapsing）

04.【BFC應用】💔BFC應用之消除浮動的影響

05.【flex鮮爲人知的特性之一】💕flex佈局下margin:auto的神奇用法

06.【flex鮮爲人知的特性之二】💖flex佈局，當flex-grow之和小於1時，只能按比例分配部分剩餘空間，而不是所有

07.【input的寬度】💗並非給元素設置display:block就會自動填充父元素寬度。input 就是個例外，其默認寬度取決於size特性的值

08.【定位特性】💙絕對定位和固定定位時，同時設置 left 和 right 等同於隱式地設置寬度

09.【層疊上下文】💚層疊上下文：小輩就是小輩，再厲害也只是個小輩

10.【粘性定位】💛position:sticky，粘性定位要起做用，須要設置最後滯留位置。chrome有bug，firefox完美

11.【相鄰兄弟選擇器】💜相鄰兄弟選擇器之經常使用場景

12.【模態框】🖤要使模態框背景透明，用rgba是一種簡單方式

13.【三角形】💝css繪製三角形的原理

14.【table佈局】💞display:table實現多列等高佈局

15.【顏色對比度】❣藍底紅字，因爲顏色對比度比較低，故而看不清，所以不是好的配色方案😂

16.【定寬高比】♥css實現定寬高比的原理：padding的百分比是相對於其包含塊的寬度，而不是高度

17.【動畫方向】🐹動畫方向能夠選擇alternate，去回交替進行

18.【線性漸變應用】🐮css繪製綵帶的原理

19.【隱藏文本】🐯隱藏文字內容的兩種辦法

20.【居中】🐰實現居中的一種簡單方式

21.【角向漸變】🐲新的漸變：角向漸變。能夠用來實現餅圖

22.【背景位置百分比】🐍background-position百分比的正確理解方式：圖片自身的百分比位置與容器一樣的百分比位置重合

23.【背景重複新值】🐴background-repeat新屬性值：round和space。前者表示湊個整，後者表示留點縫

24.【背景附着】🐐background-attachment指定背景如何附着在容器上，注意其屬性值local和fixed的使用

25.【動畫延時】🐵動畫添加延遲時間可使步調不一致

26.【outline使用】🐔可使用outline來描邊，不佔地方，它甚至能夠在裏面

27【背景定位】🐶當固定背景不隨元素滾動時，背景定位是相對於視口的

28【tab-size】🐷瀏覽器默認顯示tab爲8個空格，tab-size能夠指定空格長度

29【動畫暫停】🥝CSS動畫實際上是能夠暫停的

30【object-fit】🍓圖片在指定尺寸後，能夠設置object-fit爲contain或cover保持比例

31【鼠標狀態】🍒按鈕禁用時，不要忘了設置鼠標狀態

32【背景虛化】🍑使用CSS濾鏡實現背景虛化

33【fill-available】🍏設置寬度爲fill-available，可使inline-block像block那樣填充整個空間

34【fit-content】🍎設置寬度爲fit-content，可使block像inline-block那樣實現收縮寬度包裹內容的效果

35【自定義屬性】🍋CSS自定義屬性的簡單使用

36【min-content/max-content】🍍能夠設置寬度爲min-content和max-content，前者讓內容儘量地收縮，後者讓內容儘量地展開

37【進度條】🍊使用漸變，一個div實現進度條

38【打印】🍉能夠在打印網頁時，設置page相關屬性。好比page-break-before屬性來表示是否須要另起新頁

39【逐幀動畫】🍌利用CSS精靈實現逐幀動畫

40【resize】🍐普通元素也能夠像textarea那樣resize

41【麪包屑】🍇使用before僞元素實現麪包屑

42【sticky footer】🍈使用grid佈局實現sticky footer

43【動畫填充狀態】🍅CSS能夠設置動畫開始前和結束時所保持的狀態

44【動畫負延遲】🥑CSS動畫能夠設置延遲時間爲負數，表示動畫彷彿開始前就已經運行過了那麼長時間

45【過渡】🍆愛的魔力轉圈圈

46【動畫案例】🍬水波效果原理

47【動畫案例】🌸CSS彈球動畫效果的原理

48【outline】🌻outline屬性的妙用

49【grid】💕火狐瀏覽器grid佈局檢測器

但願有所幫助。

也歡迎閱讀本人的《JS正則迷你書》。

本文完。