将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。 通过本文，你将会了解到 CSS background 中更为强大的一些用法，并且学会利用 background 相关的一些属性，采用不同的…

由上面的自适应布局的特点,即严格按照设计图比例来呈现网页,重点是按照比例,不是尺寸,这个很重要。那是什么比例呢,对于网页设计来说一般可以简单地概括为设计元素的尺寸比上设计图的宽度尺寸,这个有点像地图的比例尺,只要按照比例尺的比例画图就可以把真实的地形画在一张有限尺寸的纸上。对于…

或者可以这么说，CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验，具体来说可以归纳为以下几点： 根据CSS选择器的解析规则可以知道，层级越深，比较的次数也就越多。当然在更多的情况下，可能嵌套的层次还会更深，另外，这里单单用了类选择器，而采用类选择器的时候，…

LESS 是 CSS预处理语言，是 CSS 的扩展。 然后说说比较流行的几款预编译器：SASS/SCSS、LESS、Stylus。 SASS/SCSS和Stylus都很强，但是我还是选择了LESS，个人喜欢NodeJS，然后stylus空格我又不喜欢，就用了LESS，现在用的也…

48张图带你从0到1掌握flex布局方式。 需要本文的Xmind导图的话，移步公众号--前端UpUp,回复flex关键字即可。 从上面图来看，我们将flex布局分为两部分讲，轴和容器。 打个预防针，flex布局涉及到12个CSS属性，父容器,子容器各6个。 接下来先梳理常见的属…

在学习flex布局之前，我们是如何让如下四个盒子排在一列呢？我们也许会用浮动、定位等等。当我们使用的时候我们会觉得很麻烦，需要调间距、量距离等。然而学习了felx布局，我们可以轻松的解决这些问题。 2009年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式…

继上一篇html篇之后，看到小伙伴留言说期待后面整理的CSS和JS篇，工具人小编整理出了本篇有关CSS部分的知识点。本篇文章作为对CSS知识点的统筹，囊括了目前大部分在面试当中常见的内容，包括一些易踩雷的知识点。文章篇幅较长，建议收藏慢慢细品。 文中篇概念性的内容也蛮多，小编一…

现在，Safari（技术预览版106）和Firefox（版本78）的预览版均支持新的CSS :is() 和 :where() 伪类。 Chrome的实施仍然落后。 你可以使用 :is() 伪类来删除选择器列表中的重复项。 此功能主要在未处理的标准CSS代码中有用。如果使用Sas…