今天在逛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复现，接下来上实例

最近有点忙，于是又停更了一个月😂，前两天在 V2 上看到 一个帖子，需求是要做一个镂空遮罩。

回答的过程中想起来有一个 mask 属性来着，好像可以试试，但是快下班了，也没有找到合适的遮罩图，也不想打开PS自己画一个再传图床，就还是用的 clip-path 做了一个 CodePen Demo。
这两天稍微有点时间，可以考虑研究一下这个遮罩属性，以及能否搭配 filter:drop-shadow() 使用。

最近在更新博客的样式，突然想到现在的flex布局已经可以定义间距了，所以大概整理了一下关于gap这个新属性资料。

gap 属性是用来设置网格行与列之间的间隙（gutters），该属性是 row-gap 与 column-gap 的简写形式。

起初是在 Grid 布局中用 grid-gap 来设置行间距和列间距的，后来意识到 Multi-column 布局中有一个 column-gap 属性，同时存在 grid-column-gap 和 column-gap 对于开发者来说是一个很疑惑的问题。并且在大范围应用的 Flex 布局中，并没有一个很好的方法来设置行间距和列间距。

于是CSS齐属属性规范开始调整，gap 代替了grid-gap 属性，并且规范对间隙属性进行了大统一，三种布局只需要使用 gap 属性就可以设置间距样式了。

群里突然又聊到了CSS样式的权重，这个话题每隔一段时间就会出现一次，但是每次都去搜索找选择器权重的文章分享有点太麻烦了，
主要是配图，想要找到自己记忆里的那张图真的很麻烦😂，所以还是自己整理一篇，以后直接分享自己的笔记就好了。
其实权重计算这个东西不麻烦，就是分 4 类:

1. inlineStyle: 行内样式
2. #ID: ID选择器
3. .Class: 类,属性和伪类选择器
4. Element: 元素和伪类元素选择器

简单的权重比较 inline style > ID > Class > Element > * 这个应该不需要说了吧，主要是多个选择器混合使用时计算的问题。