现在CSS写的是越来越少了，以至于刷到这样一个问题 👉 前端文章页的内容获取自后台编辑器，如何让他不受全局样式影响？。
思维惯性下就开始考虑各种样式隔离方案，而完全忽略掉了还有一种使用CSS的样式还原方式（all: revert） 来避免全局样式对于富文本内容的样式污染问题。

相比于各种前端的CSS样式隔离方案的高成本，使用 all: revert 方式来简易实现局部区域的样式还原，仅仅需要配置一条这样的样式规则：

<template>
  <div id="test">
    <div v-html="html"></div>
  </div>
</template>
<style>
#test * {
  all: revert;
}
</style>

但因为CSS样式的权重问题，你看到了我是使用的 ID选择器，而不是 Class选择器。
所以如果说全局样式有使用 #app 来匹配的话，就没办法使用 all: revert 的方式来还原浏览器默认样式了。这也是这个方案的短板，不过大部分情况下的样式都是可以被重置的。

如果 overflow-x 或 overflow-y 中的一个值不是 visible 或者 clip 的话，给 overflow 设置的 visible/clip 值会被自动处理成 auto/hidden。

昨天下班之前看了一眼思否问答，发现思否的导航栏出现BUG了。所以想着在官方修复前自己改CSS样式临时凑合一下。
但看到 #sf-header 元素上面的 overflow-x:hidden 属性时候，我突然就卡壳了。开始困惑如果我给元素设置了 overflow-x: hidden 之后，垂直方向上的内容溢出时展现方式应该是怎么样的？是应该是如当前看到的出现滚动条还是应该超出显示。

因为长者的逝世，最近不断有同学在问：应该怎么做站点置灰(去色)的需求。一般来说我都会转发张鑫旭大佬的 《小tip: 使用CSS将图片转换成黑白(灰色、置灰)》 这篇文章给对方，文章内详细的描述了应该如何处理。
虽然 filter 属性还是草案阶段，但是几乎所有的现代浏览器都有很好支持，所以可以直接使用 html{filter: grayscale(100%)} 来实现这个需求。

但是今天在社区里面看到有人提到了这样的一个问题请教css网站置灰，排除图片的问题？，需求是使用 filter: grayscale(100%) 使全站置灰之后，如何排除网站中的图片的置灰。

一开始我认为这个需求有一些点不合理，随即答复了可以按照区块去实现置灰，如果要实现这样的需求需要通过遍历来实现，并让他去和PM沟通，具体为什么要实现这样的方式。
但是后来有人补充了通过 :not() + :has() 伪类选择器实现的方式，但是还是有一定兼容性问题的。_{（FireFox 还未支持 :has() 伪类选择器_2022年12月）}

今天在逛V站看到一个自推UI组件库的帖子，我觉得很不错，在查看组件样例的时候呢，发现了他的抽屉组件的遮罩可以把整个页面添加毛玻璃效果！我就很惊讶。马上就 F12查看了一下他的实现方式，因为在我映像里还没有一个很简单的的可以直接实现背景元素毛玻璃效果的方式。

其实不光是抽屉组件，其它的一些类 Modal 带有遮罩的组件都有这个毛玻璃的效果，大伙可以点点看看。

好了，不多废话直接开始正题。

本周来了一个新的需求，需要前端生成打印内容，每一项数据占据一张 A4 纸，选择多项就是分多张打印，所以需要打印指定内容区域，并且使用 page-break 来控制打印区域的分页。
以前就只使用 CSS 控制过打印时样式，隐藏一些不需要打印的区域，还尝没有试过打印指定区域内容，并且控制打印内容强制分页，所以记录一下。

前几天写 flex 容器宽度被内容撑开的问题 查文章的时候，看到了一篇 flex:1 到底代表什么?，确实很多时候只是知道 flex:1 的作用，并不清楚他具体代表了什么。
和那篇帖子一样，我原先理解的也是 flex:1 应该是 flex:1 1 auto 的简写。因为设置了 flex:1 之后就可以让容器扩张了。既然 flex 的默认值是 0 1 auto 那么理所当然的就这样认为了。

看完了这个帖子之后发现其实并不是这样。
简写的 flex:1 其实是 flex:1 1 0%，其中的 flex-basis 的值从默认值变成了 0% ，但是文章并没有说明为什么会这样。

确实这个东西不值得深入研究为什么，只需要知道和理解就可以了。
但，正好昨天在翻《CSS新世界》的时候看到了这部分内容！

在弹性布局中，一个 flex 子项的最终尺寸是基础尺寸（或内容尺寸）、弹性增长或收缩、最大最小尺寸共同作用的结果。
最终尺寸计算的优先级是：
最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸

• 基础尺寸由 flex-base 属性或 width 属性，以及 box-sizing 盒模型共同决定；
• 内容尺寸最指最大内容宽度，当没有设置基础尺寸是会顶替基础尺寸的角色；
• 弹性增长指的是 flex-grow 属性，弹性收缩指的是 flex-shrink 属性；
• 最大尺寸主要受 max-width 属性限制；最小尺寸则比较复杂，受最小内容宽度、width 属性和 min-width 属性共同影响。

很早之前就遇到过这个问题但没有整理，当时处理完问题之后就没有管了。昨天又遇到了同样的问题，因为嵌套的层次很深折腾了有2个小时，所以还是需要记录下来以免未来又忘了。

其实很简单，容器使用 width:0;flex:1; 即可解决问题。

但是稍微有点没有理解的是：为什么设置宽度为 0 时，使用 flex-grow:1 可以使容器放大，但是设置宽度为 100% 时，使用 flex-shrink:1 并不会让容器缩小。

早些时候有看到过一个 纯CSS轮播图 的文章，当时有研究过实现，大概是利用了 hash (锚标记) 和 scroll-snap 来实现的，但是具体实现已经回忆不起来了。

正好现在分享群组里边暂时没有主题了，就想着可以当成一个常驻的补位小环节，大家一起浏览 CodePen 之类的社区找一个大家都感兴趣的 Demo 来研究。
在分享前还是需要自己重新研究一遍的，不然在讲述的时候出错可太 “甜蜜的” 尴尬了。

在写 上一篇文章 的时，文章开头有一张示例图，为了节省空间，我用的图片一般都不会很大，并且那张图只是Google出来的，没有调整就直接放上来了。

在列表页看着图片居左就很难受，想要把它居中放置，但是不想用 HTML 的方式来写，就突然想起来早前有看到过 肉大的一篇分享，是通过 CSS 的 属性选择器 来实现的，就想着自己也可以整理一下，然后放到博客的主题当中使用，以后图片排版就会方便很多。

最近大屏又开始火了，群里好多人又开始捡起来了数据可视化，我也一样遇到了新得是数据可视化项目，但是这次不是说 ECharts，而是数据大屏上的所谓 “科技感” 容器，比如下图：

可以看到很多的边框，虽然说可以直接让 UI 小姐姐 切给我们出来所有不同规格的背景图片来解决问题，但是就需要 UI 一份一份切给我们，就很麻烦，而且占用首屏加载的资源。
我就想是否可以用一些精灵图来完成，或者一些简单的边框可以直接使用一些 CSS 的奇技淫巧来完成。

我从花瓣上找了一些示例，然后通过CSS复现，接下来上实例