這里感覺講解CSS非常豐富，摘抄了一些，上面是原文地址。

01.【負(fù)邊距】?負(fù)邊距的效果。注意左右負(fù)邊距表現(xiàn)并不一致。
左為負(fù)時，是左移，右為負(fù)時，是左拉。
上為負(fù)時，是上移，下為負(fù)時，是上拉

---

07.【input的寬度】?并不是給元素設(shè)置display:block就會自動填充父元素寬度。input 就是個例外，其默認(rèn)寬度取決于size特性的值

---

08.【定位特性】?絕對定位和固定定位時，同時設(shè)置 left 和 right 等同于隱式地設(shè)置寬度

12.【模態(tài)框】?要使模態(tài)框背景透明，用rgba是一種簡單方式

---

13.【三角形】?css繪制三角形的原理

---

16.【定寬高比】?css實現(xiàn)定寬高比的原理：padding的百分比是相對于其包含塊的寬度，而不是高度

---

18.【線性漸變應(yīng)用】?css繪制彩帶的原理

---

19.【隱藏文本】?隱藏文字內(nèi)容的兩種辦法

---

21.【角向漸變】?新的漸變：角向漸變。可以用來實現(xiàn)餅圖

---

22.【背景位置百分比】?background-position百分比的正確理解方式：圖片自身的百分比位置與容器同樣的百分比位置重合

---

23.【背景重復(fù)新值】?background-repeat新屬性值：round和space。前者表示湊個整，后者表示留點縫

---

24.【背景附著】?background-attachment指定背景如何附著在容器上，注意其屬性值local和fixed的使用

---

26.【outline使用】?可以使用outline來描邊，不占地方，它甚至可以在里面

---

30【object-fit】?圖片在指定尺寸后，可以設(shè)置object-fit為contain或cover保持比例

---

31【鼠標(biāo)狀態(tài)】?按鈕禁用時，不要忘了設(shè)置鼠標(biāo)狀態(tài)

---

35【自定義屬性】?CSS自定義屬性的簡單使用

下面是制作進度條的實例

---

36【min-content/max-content】?可以設(shè)置寬度為min-content和max-content，前者讓內(nèi)容盡可能地收縮，后者讓內(nèi)容盡可能地展開

如果當(dāng)一個div里面包含圖片和文字共存的時候：
max-content 會變成最大的文字內(nèi)容
min-content 會變成最小的文字內(nèi)容

---

37【進度條】?使用漸變，一個div實現(xiàn)進度條

---

41【面包屑】?使用before偽元素實現(xiàn)面包屑

---

43【動畫填充狀態(tài)】?CSS可以設(shè)置動畫開始前和結(jié)束時所保持的狀態(tài)

---

45【過渡】?愛的魔力轉(zhuǎn)圈圈

總結(jié)

以上是生活随笔為你收集整理的你未必知道的49个CSS知识点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。