朋友圈刷到了coco大佬在b站直播css知识点，一共更新了两集，都看完了。真不错，涉及到了我的知识盲区，学到了不少呢，记录下来。

直播的两期我都喜欢，希望大佬以后能多出直播，让我学习学习

第二期的知识点 => 如他所说，非常接近项目使用

1. 字体

不同操作系统下，预装的字体是不一样的！

即便使用相同的 font-family 规则不代表前端展示上的相同！

Web 页面的 lang, charset 和浏览器设置都会对默认字体产生影响 不同操作系统、不同浏览器的默认中文、英文字体的设置都有区别

实际上，很少存在满足有 9 重粗细的字体

通常而言，字体拥有的字重数量为 4 至 6 个

只有 400(normal) 和 700(bold) 对应的字重是每种字体必备的

1. 选择器

通过自己叠加自己的方式，提升选择器的权重。这个我是第一次知道，是我蠢了,比如.foo.foo

当然，也可以叠加属性选择器，比如.foo[class]

1. inherit 每个 CSS 属性定义的概述都指出了这个属性是是否是继承，大部分都是。我也是无意间知道子元素可以继承父元素的背景

2. unset 如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值， 如果没有继承父级样式，则将该属性重新设置为初始值

使用场景，这个属性被某个css修改了，并且再次修改无效的时候，就用它

1. 100vh失效 在移动端 chrome 浏览器中， 100vh 高度会出现滚动条

根因在于很多浏览器，会把地址栏计算在内 这会导致一系列预料之外的 BUG，慎用 100vh

当我们仍旧需要占满一屏的时候，更好的选择是：100% ，从html,body开始继承

开始学习新的更酷的容器查询单位：

cqw：表示容器查询宽度（Container Query Width）占比。1cqw等于容器宽度的1%。假设容器宽度是1000px，则此时1cqw对应的计算值就是10px cqh： 表示容器查询高度（Container Query Height）占比。1cqh等于容器高度的1% 容器查询：它给予了 CSS，在不改变浏览器视口宽度的前提下，只是根据容器的宽度变化，对布局做成调整的能力。

1. 3种可以实现超出容器范围裁剪的方法 overflow: hidden

clip-path 可控制的，灵活的裁切区域

contain: paint 不绘制元素范围外的内容

contain: paint 属性诞生的目的，即是为加快页面的渲染，在非必要区域，不渲染元素。因此，如果元素不在屏幕上或以其他方式设定为不可见，则其后代不可见不被渲染。 也就是说，此元素的子元素不会在此元素的边界之外被展示。

3 种可以实现超出容器范围裁剪的方法：

overflow: hidden clip-path 可控制的，灵活的裁切区域 contain: paint 不绘制元素范围外的内容 contain: paint 属性诞生的目的，即是为加快页面的渲染，在非必要区域，不渲染元素。因此，如果元素不在屏幕上或以其他方式设定为不可见，则其后代不可见不被渲染。

也就是说，此元素的子元素不会在此元素的边界之外被展示。

1. 如何实现整块的溢出隐藏？ ```

FE BE UX Designer 前端工程师

.single-line { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inlineblock span { display: inline-block; } ```

这个压轴的算是惊讶到我了，原来还能这样操作，太厉害了吧

第一期的知识点 => 偏技巧我也很喜欢，因为我经常看到我同事使用各种技巧

先去洗个头，洗个澡，明天补上，这一块内容我很有兴趣，在工作中，我经常看到我同事使用这些东西。真的很棒

总结

缺少激情，缺少干劲，让我停止了学习的步伐。记得刚毕业那会可爱学了，每周末都有学习的计划，对未来有明确的目标。可最近几年没有了，希望今年能够调整好自己状态，让自己能够有所成就，有所成长，不辜负自己的期望。

明年就30了，不能一事无成，还需要面临着我可能要失业的风险吧。行情不好，技术就要跟上，不让我这个年纪就太尴尬了