众所周知，CSS 根据选择器名称去全局匹配元素，它没有作用域可言，比如你在页面的两个不同的地方使用了一个相同的类名，先定义的样式就会被覆盖掉。CSS 一直缺乏模块化的概念，命名冲突的问题会持续困扰着你。每次定义选择器名称时，总会顾及其他文件中是否也使用了相同的命名，这种影响在组…

[HTML与CSS](https://www.sitepoint.com/html-css/) CSS的:is、:where和:has伪类选择器如何工作 =======================

CSS 中存在两种尺寸：内在尺寸（intrinsic）和外在尺寸（extrinsic）。为元素的 width、height 设置的固定属性值，就是指外部尺寸，这是最常用的方式。而内部尺寸，则是由元素包含的内容量决定的。 本篇将会详细介绍控制内在尺寸的每个值，看看它们的使用能带来…

fixed 元素一定是相对视口定位的吗？不一定。举一个例子，如果父元素 transform: scale(1) 了，子元素是 position: fixed。会发现，子元素是相对这个父元素定位的。 其实上面这个问题，牵扯到了包含块（containing block）的概念。那么…

利用float实现圣杯布局是最原始也是兼容性最好的方式，当然相对于其它几种来说较为复杂。 其中有一个需要注意的是盒子的排布顺序，其中.center盒子排在最前面，left和right依次排列，这里主要是用到了float和margin的特性，接下来会讲到。 ⬆接下来定义子盒子的宽…

想写一篇关于 SVG 滤镜的文章已久，SVG 滤镜的存在，让本来就非常强大的 CSS 如虎添翼。让仅仅使用 CSS/HTML/SVG 创作的效果更上一层楼。题图为袁川老师使用 SVG 滤镜实现的云彩效果 -- CodePen Demo -- Cloud (SVG filter …

在一些 web 活动页中经常能看到特殊处理的标题文字，比如这样的 暂时忽略掉特殊字体，通过设计稿的图层样式可以发现，共有 3 个文字特效，分别是渐变、描边、投影 作为一个有追求的前端，当然不会直接用图

css实现tabs圆角切换效果，使用伪元素、border-radius、box-shadow叠加处理。

本文主要讲css各种解决方案，包括，BEM、css modules、Css in Js、预处理器、Shadow DOM，Vue Scoped，分析优缺点