49 張 GIF 圖中學習 49 個 CSS 知識點

2021-02-20 小生方勤


作者:老姚《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正則迷你書》: https://github.com/qdlaoyao/js-regex-mini-book

最後

如果你想進【大前端交流群】,關注公眾號點擊「交流加群」添加機器人自動拉你入群。關注我第一時間接收最新乾貨

相關焦點

  • 學習民法典|民法典中的49個重要知識點
    民法典中的49個重要知識點,轉自法學茶座。一、總則編的8個重要知識點1.胎兒享有繼承權涉及遺產繼承、接受贈與等胎兒利益保護的,胎兒視為具有民事權利能力。但是胎兒娩出時為死體的,其民事權利能力自始不存在。
  • 民法典中的49個重要知識點
    民法典中的49個重要知識點,轉自法學茶座。一、總則編的8個重要知識點1.胎兒享有繼承權涉及遺產繼承、接受贈與等胎兒利益保護的,胎兒視為具有民事權利能力。但是胎兒娩出時為死體的,其民事權利能力自始不存在。
  • 盤點web前端動畫技術,css動畫是通過什麼實現的?
    理解了它們三者之間的關係,再往下理解學習其他關於網站的內容,就不會出現「知其然不知其所以然」的情況。應後臺粉絲留言,今天主要給大家講解一下css中動畫,如果漏掉內容望大家補充!web前端中的動畫分類再講css動畫前,為什麼要說明html、css、JavaScript之間的關係,是因為網站前臺動畫三者類型的動畫,它們分別是css動畫、FLASH動畫(gif動態圖)、JavaScript動畫。這三種動畫是網頁前端工程師經常使用到的。
  • 30年老教師:初中英語語法編成28張「思維圖」!全班49人均分125
    30年老教師:初中英語語法編成28張「思維圖」!全班49人均分125思維導圖是一個簡單、有效、美麗的思維工具。形象直觀的圖形,可以簡化理解,無論是在學習上或是平時生活的運用中,思維導圖都是一個非常不錯的學習用具。
  • 怎麼製作gif動圖?怎麼用視頻做gif動圖?
    在日常生活中,經常會看到各種類型的gif動圖,比較常見微信表情包,QQ表情包,文章插圖等等。那麼如果想要自制gif動圖的話大家知道怎樣來進行製作嗎?接下來教大家一招,通過裁剪視頻轉gif動圖的操作方法,相信大家都有許多覺得好玩有趣的視頻吧,可以使用視頻轉gif功能快速完成gif在線製作,操作技巧如下。點擊導航欄中的gif工具,選擇視頻轉gif功能。點擊選擇視頻,將想要截取片段的視頻上傳到網站。
  • HTML+CSS=無限可能——案例詳解:我的POI主題作品
    這個頁面中用到了三類圖片,jpg、png和gif動圖,它們都可以用Photoshop等圖像處理軟體來進行加工。jpg是有損壓縮格式,大部分網頁中用到的背景圖,以及尺寸較大的圖片都是jpg格式,因為它可以最大限度地壓縮圖片文件的體積,提高網頁打開的速度。
  • 《民法典》應當熟知的49個知識點
    本文整理49個須知要點,供大家參閱。一、總則編的8個重要知識點二、物權編的7個重要知識點三、合同編的6個重要知識點(第一千二百三十二條、第一千二百三十四條、第一千二百三十五條)49.完善高空拋物墜物治理規則禁止從建築物中拋擲物品,同時針對此類事件處理的主要困難是行為人難以確定的問題
  • 利用CSS、JavaScript及Ajax實現圖片預加載的三大方法
    圖片預先加載到瀏覽器中,訪問者便可順利地在你的網站上衝浪,並享受到極快的加載速度。這對圖片畫廊及圖片佔據很大比例的網站來說十分有利,它保證了圖片快速、無縫地發布,也可幫助用戶在瀏覽你網站內容時獲得更好的用戶體驗。本文將分享三個不同的預加載技術,來增強網站的性能與可用性。
  • 成華區49中
    學校簡介四川省成都市第四十九中學校是四川省二級示範性普通高中,創辦於1977年,原名聖燈中學,1992年1月更名為四川省成都市第四十九中學校,目前是樹德教育集團成員學校2016年9月,四十九中和美校區正式啟用;2019年1月,四十九中正式入駐楓林新校區。至此學校形成一校兩區新格局(楓林校區 和美校區)。師資情況現有在職教職工230餘名,其中省市特級教師2人,省骨幹教師5人,市區學科帶頭人16人,市區優秀教師、優秀德育工作者、優秀班主任、優秀青年教師、教壇新秀等共130餘人。
  • 成華區49中
    學校簡介四川省成都市第四十九中學校是四川省二級示範性普通高中,創辦於1977年,原名聖燈中學,1992年1月更名為四川省成都市第四十九中學校,目前是樹德教育集團成員學校,掛牌「成都樹德成華中學」。招生人數:楓林校區(本部),11個班,500人左右,設5個基地班;和美校區4個班,設2個基地班。3.
  • ...民法典新規則49個法律要點人人應需熟知 總則編的8個重要知識點...
    蘭州市中級人民法院民事審判二庭副庭長雷明介紹,在民法典新規則中,有49個法律要點人人應需熟知,這些「亮典」與我們生活息息相關。其中包括總則編的8個重要知識點;物權編的7個重要知識點;合同編6個重要知識點;人格權編7個重要知識點;婚姻家庭編8個重要知識點;繼承編6個重要知識點;侵權責任編7個重要知識點。
  • 我發現了7個關於 CSS backgroundImage 好用的技巧
    背景圖像可能是我們所有前端開發人員在我們的職業生涯中至少使用過幾次的CSS屬性之一。大多數人認為背景圖像不可能有任何不尋常的地方,但經過研究,答案並非如此。所以本文收集了七個我認為最有用的技巧,並創建了一些代碼示例。
  • CSS新手閱讀的CSS技巧十則
    一般地,Border的寬度預設是medium,一般等於3到4個像素;預設的顏色是其中文字的顏色。如果這個值正好合適的話,就不用設那麼多了。三、給元素同時使用兩個類一般一個元素設定一個類(Class),但這並不意味著不能用兩個。
  • 42個來自《 CSS世界》中的實用技巧
    -- html --><div> <img src="demo.gif"></div><!-- html --><img src="demo.gif"><!
  • 汽車尾燈的新寵—E522.49
    隨著技術進步,汽車尾部照明系統已得到極大的發展,為適應市場中對尾燈功能與個性化的需求。   快速的差分總線接口,用於動態LED控制   設備和LED電源電壓範圍為5V至40V   16個具有10位解析度的PWM發生器   16個可編程
  • 自己製作gif動圖表情包,別再到處求原圖了
    這周的每周開方,公子要分享給你們的是一些gif動圖的網站,你可能想問gif動圖和PPT有什麼關係,別著急,公子的存在不就是為你們不斷打開新世界的大門嗎01SOOGIFSoogif是這類網站中比較實用的比如下面這個簡單又比較有趣的小圖:如果用在PPT中會有什麼效果呢,這就涉及到了一個知識點:PPT是支持gif格式的,所以如果我們能找到一些有設計感的動圖,直接置入PPT,這樣呈現出來的動畫效果,很多時候都是PPT動畫無法碾壓的!
  • web前端學習路線css屬性
    找到一份web前端工作需要掌握的內容如下:首先是html,css這些簡單的靜態布局這是最基本的學習內容,不在多說。下面來給大家講講css相關知識:學習目標· 1、css屬性和屬性值的定義· 2、css文本屬性· 3、css列表屬性· 4、css背景屬性· 5、css邊框屬性
  • 男子手術後死亡 病歷上寫「49歲絕經,育三子」(圖)
    男子手術後死亡 病歷上寫「49歲絕經,育三子」(圖)   男子手術後死亡 病歷載「49歲絕經」  家屬的疑問  劉開玉的病歷中記載
  • CSS3 transform之scale縮放|transition之過渡動畫調整手記
    想給學而行營銷網圖文列表中的圖片,增加一點動態交互——別一動不動地躺屍,太平了!看過別家的網站,其中滑鼠移到圖片上,圖片會適當地進行縮放,這種微妙的動態體驗,給人的感覺是蠻好的。既然是滑鼠移上去後再發生變化,那首先需在css文件中,針對圖片的hover增加個樣式,縮放比例為1.1。
  • DIV+CSS網頁布局常用的一些基礎知識整理
    CSS命名規範一.文件命名規範全局樣式:global.css;框架布局:layout.css;字體樣式:font.css;連結樣式:link.css;列印樣式:print.css;二.常用類/ID命名規範