还需要学习的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 伪元素
- 这类伪元素只有视觉效果，没有交互效果（不能绑定事件；他的交互效果全体现在父元素上）
# content-visibility
- content-visibility: auto
content-visibility: auto无法直接替代 LazyLoad，设置了content-visibility: auto的元素在可视区外只是未被渲染，但是其中的静态资源仍旧会在页面初始化的时候被全部加载。- 在元素始终在dom树中，即使没有被渲染
# contain: strict
- 外层元素A尺寸设置了flex:1，子元素B款和高设置为100%。此时即使内层子元素B设置 overflow:auto 但是他的高度还是被子孙元素撑起来了远大于B想要的100%的尺寸。此时使用上面的样式就可以解决这个问题。
- 会触发以下优化：
- 尺寸限制 (size) 元素尺寸不会受子元素影响 必须显式设置宽度/高度
- 布局隔离 (layout) 内部布局不影响外部 外部布局不影响内部
- 绘制隔离 (paint) 子元素不会溢出容器 浏览器可跳过不可见区域的绘制
- 样式隔离 (style) 计数器作用域隔离 引用的属性不影响外部
