还需要学习的css
wǎng luò shí huāng 2021-12-11
css补漏
有很多东西还需要学习
# svg 滤镜实现强大的粒子聚散效果：https://mp.weixin.qq.com/s/ioaAYZ8yRT-IT4Fzv4VHQg (opens new window)
- 此公众号还有很多有意思的 css 技巧。
# object-fit
- 图片设置宽高都为 100%，使用 object-fit:contain 图片也不会变形。
# css 阻止滚动穿透、css 默认变量、css 预留滚动条空间，避免重排
- https://mp.weixin.qq.com/s/MK9EmxVcFl2tYgR89vkc1w
# CSS 函数
- Clamp 函数：https://mp.weixin.qq.com/s/q95wJjksAGRiyk8mRz6qig
- 可设置最大值、默认值、最小值。
# 百分比单位
- 使用 百分比+padding，这里有一个很细的知识点；当 padding、margin 取值为百分比时，百分比的值是以父元素的 width 为参考。
# css 动画库：
- https://segmentfault.com/a/1190000023471689
# img 的 loading=lazy 懒加载失效：
- 只需要在 IMG 标签中加上 width 和 height，这是因为浏览器在应用延迟加载之前需要知道元素的大小。自注：如果不设置 width、height 属性，那么浏览器就会用图片在浏览器默认的大小，此时浏览器可能会误判图片是否在可视区。
# CSS 混合模式：mix-blend-mode、isolation 和 background-blend-mode
- https://blog.csdn.net/dwb123456123456/article/details/84560763
- 例如我们想要把元素本身和父元素的背景色融合起来以消除色差，那么可以使用
mix-blend-mode: darken;
# 泛光效果：drop-shadow()
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow
# css 毛玻璃效果：需要以下两个条件
- 元素背景颜色有透明度
- backdrop-filter: blur(50px);
# flex 垂直布局，怎么让最后一个元素在列的末尾
- 最后一个元素设置：margin-top: auto。这个原理和 flex 横向布局下最后一个元素靠右一个道理（margin-left: auto）
# 让视频背景颜色自定义，以及背景具有模糊度
video { border-radius: 4px; object-fit: scale-down; width: 291px; height: 512px; backdrop-filter: blur(4px); // 让元素背景具有模糊效果，但元素内容不会有模糊效果。 &::backdrop{ // 自定义视频带有透明度的背景颜色； background: rgba(0,0,0,.5) !important; } } // 视频全屏，效果如下。（下面的视频是 mp4 格式）
filter 属性的理解：
- https://mp.weixin.qq.com/s/pMPP7ok6BPRwNqv2N1ZyHA
# 防止滚动条占用空间
overflow:overlay此时滚动条不占空间
# zoom 和 scale 都是缩放，他们的区别：
- zoom 缩放后，占用空间会变化
- scale 缩放后，占用空间不会发生变化
# 栅格布局
- https://juejin.cn/post/7083428699235680270
# :after 和 :before 伪元素
- 这类伪元素只有视觉效果，没有交互效果（不能绑定事件；他的交互效果全体现在父元素上）
