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佈局檢測器
希望有所幫助。
作者:老姚
鏈接:https://juejin.im/post/5d3eca78e51d4561cb5dde12
來源:掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。