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

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。 利用 text-align: center 可以实现在块级元素内部的…

布局的传统解决方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差。2009年，W3C提出了一种新的方案-Flex，Flex是Flexible Box的缩写，意为”弹性布局”。Flex可以简便、完整、响应式地实现多种页面布局。下…

1. CSS :visited伪类选择器隐秘往事回忆录 主要介绍CSS :visited伪类选择器，由于安全方面的限制，很多你以为可以使用的CSS属性，在:visited这里都是不能使用的，当然，很多很多其他怪异的特性。如有兴趣，可以点击这里阅读原文。 2. CSS scrol…

一个display：block的元素设定宽高之后表现为矩形。通过设定border-radius可以得到圆角矩形，圆形和椭圆形。 border-radius，可以分别对4个角进行设定。 例如上图：border-top-left-radius: apx bpx; border-xx…

任何一个容器都可以通过设置 display 为 flex/inline-flex 将其指定为Flex布局。对于设置了Flex布局的容器，子元素的 float、clear、vertical-align 属性将失效；但是，如果对这些子元素设置 position 定位，那么Flex属…

CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。创建本教程的目的是为了帮助您更好地理解和学习网格布局（Grid）。 网格容器 显示网格 轨道的最小最大尺寸 重复的网格轨道 定义网格间隙 用网格线编号定位项目 网格项目跨越行列 网格线命名…

BFC 已经是一个耳听熟闻的词语了，但是我对于BFC的概念以及应用场景一直都不是很明白，据说搞懂BFC可以让我们理解CSS中某些原本诡异的地方。今天着重去了解了一下，做了以下总结。 在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其…

本文着重描述关于 margin，我们日常不太容易发现的 “坑”。