你未必知道的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動畫可以設定延遲時間為負數，表示動畫仿佛開始前就已經運作過了那麼長時間

你未必知道的49個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布局檢測器

References

繼續閱讀