最近在项目中使用overflow属性的时候踩到了几个以前从未踩过的坑。在填坑的过程中发现，原来使用overflow的时候还是有不少的坑，而且这些坑都是因为自己对该属性不甚了解所造成的，或者说是和其他CSS属性在一起使用所触发的。那么在使用overflow应该怎么使用才能避开这些不必要的烦恼呢？或者说在使用overflow不应该和哪些属性结合在一起使用呢？为了解开这个迷我重读了有关于overflow的规范。今天将相关的理解和新的认知小结一下与大家共享，希望对于大家在实际使用的时候能尽可能的避开这些坑。

前面花了很长的篇幅在《探索CSS Masking模块：Clipping》和《探索CSS Masking模块：Masking》两文中分两部分详细介绍了CSS Masking Module Level 1中的Clipping和Masking的基础知识和相关特性，并且使用一些简单的小示例向大家演示了Clipping和Masking如何使用。

探索CSS Masking模块主要分为Clipping和Masking两个部分，在上一节中，花了很大的篇幅介绍了Clipping相关的特性，今天接着来学习或者聊聊Masking相关的知识点。从上一节中我们知道，在Masking中有一个遮罩层，这个遮罩层是一个图像，该层也被称为遮罩模式，主要有高亮和Alpha两种模式。其中Alpha模式带有alpha通道的图像，alpha通道包含在每个像素数据中的透明信息。最简单的示例就是带有黑色和透明区域的PNG图像，其中黑色部分将会显示，透明区域内容将会被隐藏。

最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的mask和clip-path来实现，甚至还想结合SVG相关的特性。为了验证自己的一些想法，开始着手撸码，但问题来了，在撸码的过程中，我发现自己对于mask的相关特性理解的还不够透彻。因此重新阅读CSS Masking Module Level 1规范中的文档和相关教程。才发现原来CSS Masking是如此的强大。下面是我自己对CSS Masking模块的一些理解，希望对大家学习和了解该功能模块有所帮助。

很多年前，前端同学都觉得PC端的适配（兼容处理）难，都认为移动端的时代适配会容易得多，也无需考虑那么多的事情。事实并非如此，移动端的时代同样面临着各种适配的处理。特别是刘海机的出现，前端需要考虑刘海机适配。而如今随着三星Galaxy Fold和华为Mate X折叠屏手机的面世，前端同学接着又要处理折叠屏幕的适配。就我们团队而言，在上个月就接到相关的通知，需要处理折叠屏的适配。碍于真机难得，前段时间就通过模拟机，做了一些简单的适配测试，不过幸运的是，今天拿到了真机（三星Galaxy Fold) ，写了一个简单的Demo，做了一些适配的测试。特此将相关心得和大家一起共享，希望对大家有所帮助。

CSS-Tricks网站是一个非常优秀的网站，特别对于CSSer而言，该网站不断的在更新一些优秀的教程和技巧，为前端社区做出了具大的贡献。她一直是我的偶像，也是我学习的榜样，因为我从该网站上学到了很多新技术，让我在CSSer方面的眼界扩展的更大。今年1月份改版之后，整个社交媒体的响应非常的热烈，很多人都为新版赞赏。而我这次参加中国第五届CSS Conf大会之前和@裕波聊过，该和社区的同学聊什么样的话题呢？经过讨论下来，要不就聊聊CSS-Tricks网站这次改版运用的一些新特性，这些新特性又为用户体验带来什么样的改变，甚至为前端开发者又带来什么样的改变？所以借此机会，以我自己的视角来聊聊相关的话题。

Vue使用的模板语言是HTML的超集。在Vue的模板中除了使用插值（{{}}）之外还可以使用指令。在上一节中，我们主要学习和探讨了Vue模板相关的知识，在这一节中，我们将一起来了解Vue中的指令。在Vue中，指令基本上类似于添加到模板中的HTML属性。它们都是以v-开头，表示这是一个Vue特殊属性。Vue中的指令主要分为内嵌的指令和自定义指令。另外有一些指令还带有相应的修饰符。接下来我们主要围绕着这些点来展开，咱们先从内嵌的Vue指令开始。

Web颜色是Web应用程序或页面中不可或缺的一部分，对于CSS处理颜色总是非常的简单和单一。但很多时候我们需要一些特殊的效果，比如随机色等。那么我们就需要借助JavaScript来完成。在学习如何使用JavaScript操作CSS颜色之前，我们需要对CSS如何设置颜色有一个基本的了解。CSS设置颜色模式有多种，最为常见的模型有：RGB和HSL。我们先来看一下这两种颜色模式。

CSS的mask（遮罩），有时也称CSS的蒙层，最早是苹果公司2008年提出的，并且添加到webkit引擎当中。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类型于png24位或png32位中的alpha透明通道的效果。2012年被纳入到W3C的草案中，但这个版本与苹果公司提出的版本是不同的。时至今日，该规范已经有多个版本，现在是CSS Masking Module Level1版本，属于TR阶段。据Caniuse.com统计来讲，该属性得到的支持度还是有一定的限制，仅部分属性被浏览器支持。虽然如此，但该属性还是非常的有意思，值得大家花点时间去探究，比如今天要聊的mask-composite属性就是非常有意思的一个属性。

在Vue中，Vue模板对应的就是Vue中的View（视图）部分，也是Vue重中之一，而在Vue中要了解Vue模板我们就需要从两个方面来着手，其一是Vue的模板语法，其二就是模板渲染。Vue模板语法是Vue中常用的技术之一，除非在应用程序中不用渲染视图或者你的程序直接采用的是渲染函数（render()）。相较而言，模板语法较简单一点，但对于模板的渲染（模板编译）就会更为复杂一些，如果需要了解模板渲染就需要对Vue的渲染函数，响应式原理之类的要有所了解。