轉載：https://blog.csdn.net/liyunkun888/article/details/102723444
CSS動態效果的內容，看着效果很好，防止作者刪除，以後再也看不到了，那就保存在自己本地靠譜些。
01.【負邊距】負邊距的效果。注意左右負邊距表現並不一致。左爲負時，是左移，右爲負時，是左拉。上下與左右類似
2.【shape-outside】不要自以爲是了。你以爲自己是方的，在別人眼裏你卻是圓的
3.【BFC應用】BFC應用之阻止外邊距合併（margin collapsing）
4.【BFC應用】BFC應用之消除浮動的影響
5.【flex不爲認知的特性之一】flex佈局下margin:auto的神奇用法
6.【flex不爲認知的特性之二】flex佈局，當flex-grow之和小於1時，只能按比例分配部分剩餘空間，而不是全部
7.【input的寬度】並不是給元素設置display:block就會自動填充父元素寬度。input 就是個例外，其默認寬度取決於size特性的值
8.【定位特性】絕對定位和固定定位時，同時設置 left 和 right 等同於隱式地設置寬度
9.【層疊上下文】層疊上下文：小輩就是小輩，再厲害也只是個小輩
10.【粘性定位】position:sticky，粘性定位要起作用，需要設置最後滯留位置。chrome有bug，firefox完美
11.【相鄰兄弟選擇器】相鄰兄弟選擇器之常用場景
12.【模態框】要使模態框背景透明，用rgba是一種簡單方式
13.【三角形】css繪製三角形的原理
14.【table佈局】display:table實現多列等高佈局
15.【定寬高比】css實現定寬高比的原理：padding的百分比是相對於其包含塊的寬度，而不是高度
16.【動畫方向】動畫方向可以選擇alternate，來回交替進行
17.【線性漸變應用】css繪製綵帶的原理
18.【隱藏文本】隱藏文字內容的兩種辦法
19.【居中】實現居中的一種簡單方式
20.【角向漸變】新的漸變：角向漸變。可以用來實現餅圖
21.【背景位置百分比】background-position百分比的正確理解方式：圖片自身的百分比位置與容器同樣的百分比位置重合
22.【背景重複新值】background-repeat新屬性值：round和space。前者表示湊個整，後者表示留點縫
23.【背景附着】background-attachment指定背景如何附着在容器上，注意其屬性值local和fixed的使用
24.【outline使用】可以使用outline來描邊，不佔地方，它甚至可以在裏面
25.【背景定位】當固定背景不隨元素滾動時，背景定位是相對於視口的
26.【tab-size】瀏覽器默認顯示tab爲8個空格，tab-size可以指定空格長度
27.【object-fit】圖片在指定尺寸後，可以設置object-fit爲contain或cover保持比例
28.【鼠標狀態】按鈕禁用時，不要忘了設置鼠標狀態
29.【背景虛化】使用CSS濾鏡實現背景虛化
30.【fill-available】設置寬度爲fill-available，可以使inline-block像block那樣填充整個空間
31.【fit-content】設置寬度爲fit-content，可以使block像inline-block那樣實現收縮寬度包裹內容的效果
32.【自定義屬性】CSS自定義屬性的簡單使用
33.【min-content/max-content】可以設置寬度爲min-content和max-content，前者讓內容儘可能地收縮，後者讓內容儘可能地展開
34.【打印】可以在打印網頁時，設置page相關屬性。比如page-break-before屬性來表示是否需要另起新頁
35.【逐幀動畫】利用CSS精靈實現逐幀動畫
36.【resize】普通元素也可以像textarea那樣resize
37.【麪包屑】使用before僞元素實現麪包屑
38.【動畫填充狀態】CSS可以設置動畫開始前和結束時所保持的狀態
39.【動畫負延遲】CSS動畫可以設置延遲時間爲負數，表示動畫彷彿開始前就已經運行過了那麼長時間
40.【動畫案例】水波效果原理
41.【動畫案例】CSS彈球動畫效果的原理
42.【outline】outline屬性的妙用
