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

  • 2019 年 10 月 10 日
  • 筆記

作者:老姚,《JS正則迷你書》的作者 https://github.com/qdlaoyao/css-gif

本文的每一條,都是我曾經發過的掘金沸點,其中有很多條超過了百贊(竊喜)。鑒於時不時有童鞋翻我以前的沸點,因此,本文收集了個人目前發過的所有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正則迷你書》

本文完。

References

  • 《JS正則迷你書》(https://github.com/qdlaoyao/js-regex-mini-book)