原文地址：Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid 原文作者：Manuel Matuzović 译文出自：掘金翻译计划 本文永久链接：https://github.com/xitu/go…

不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子： 现在，你甚至可以在边框中使用渐变。 具体的例子可以看这里，或者看这里使用的是background-clip和backgroun…

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。如下图所示： 扭曲skew()函数能够让元素倾斜显示。它…

下来用几个例子说明下CSS的权重。 分析得出最后一个最大 权重为 320 覆盖上面所有的。 嵌套越多，权重就越大，除过!important，有important 还是人家最大 。 因为伪类的权重相当于类元素，故因为类元素的权重小于id元素的权重，所以下面这个设置：hover无效…

2010 年 5 月，官方推出了一个全新的语法，被叫做 SCSS，意思是 Sassy CSS。这个语法带来了对 CSS 友好的语法，试图弥合 Sass 和 CSS 之间的鸿沟。

在过去几年里，Flexbox已经成了前端最流行的布局框架，这并不奇怪，因为我们可以很方便的用它去对齐元素。 然而，前端村儿里面还有个叫Grid的小孩儿，他和Flexbox有很多功能相似的地方，有些地方他比Flexbox要好，但有也有不足。 这也会变成让开发者们纠结的地方，应该用…

这一次我想讲解一下HTML+CSS的两栏、三栏布局以及垂直居中的实现方式。因为个人所学有限所以可能不会罗列出所有的实现方法，不过我会继续努力查漏补缺。 先写出初始样式和结构。 右固定，左适应同理。 以上这些实现方式，虽然实现了但还不够好。因为main是主要的显示区域，所以我们应…

1. 什么是主题样式？ 相信大家对网页的主题样式功能肯定不陌生。对于一些站点，在基础样式上，开发者还会为用户提供多种主题样式以供选择。 下面就是一个主题样式功能：用户可以在右侧选择自己喜欢的主题色，从而得到一个“个性”的页面。 还有时候，我们开发了一个系统用来售卖，采购我们系统…

这段时间写CSS比较多，间接地发现一些与中文有关的CSS特性，在此整理了几点。👀 1. 竖向写作 writing-mode: vertical-lr; 中文在vertical-lr或vertical-rl下每个字符并不会发生旋转，而英文和阿拉伯数字则会把整个字符旋转90度。 …