你未必知道的49个CSS知识点
這里感覺講解CSS非常豐富，摘抄了一些，上面是原文地址。
01.【負邊距】?負邊距的效果。注意左右負邊距表現并不一致。
左為負時，是左移，右為負時，是左拉。
上為負時，是上移，下為負時，是上拉
07.【input的寬度】?并不是給元素設置display:block就會自動填充父元素寬度。input 就是個例外，其默認寬度取決于size特性的值
08.【定位特性】?絕對定位和固定定位時，同時設置 left 和 right 等同于隱式地設置寬度
12.【模態框】?要使模態框背景透明，用rgba是一種簡單方式
13.【三角形】?css繪制三角形的原理
16.【定寬高比】?css實現定寬高比的原理：padding的百分比是相對于其包含塊的寬度，而不是高度
18.【線性漸變應用】?css繪制彩帶的原理
19.【隱藏文本】?隱藏文字內容的兩種辦法
21.【角向漸變】?新的漸變：角向漸變。可以用來實現餅圖
22.【背景位置百分比】?background-position百分比的正確理解方式：圖片自身的百分比位置與容器同樣的百分比位置重合
23.【背景重復新值】?background-repeat新屬性值：round和space。前者表示湊個整，后者表示留點縫
24.【背景附著】?background-attachment指定背景如何附著在容器上，注意其屬性值local和fixed的使用
26.【outline使用】?可以使用outline來描邊，不占地方，它甚至可以在里面
30【object-fit】?圖片在指定尺寸后，可以設置object-fit為contain或cover保持比例
31【鼠標狀態】?按鈕禁用時，不要忘了設置鼠標狀態
35【自定義屬性】?CSS自定義屬性的簡單使用
下面是制作進度條的實例
36【min-content/max-content】?可以設置寬度為min-content和max-content，前者讓內容盡可能地收縮，后者讓內容盡可能地展開
如果當一個div里面包含圖片和文字共存的時候：
max-content 會變成最大的文字內容
min-content 會變成最小的文字內容
37【進度條】?使用漸變，一個div實現進度條
41【面包屑】?使用before偽元素實現面包屑
43【動畫填充狀態】?CSS可以設置動畫開始前和結束時所保持的狀態
45【過渡】?愛的魔力轉圈圈
總結
以上是生活随笔為你收集整理的你未必知道的49个CSS知识点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自然语言处理-中文语料预处理
- 下一篇： 毕业论文格式检查指南与内容要求