你未必知道的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知识点的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 自然语言处理-中文语料预处理
- 下一篇： CSS 文字显示在图片的中间