我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以下将介绍七种单纯利用CSS垂直居中的方式。

一个最简单使用transition的方法就是和CSS伪元素一起用，比如:hover。注意我们在指定属性名字，transition的时长，以及默计时函数，linear。

什么是文字左右环绕图片？就是下图的效果： 效果的CSS代码可以点击这里查看 在CSS中，并没有float: center这种设置，但是我们可以通过一些小技巧来模拟出类似的效果。 经常会有小伙伴问：有float: left和right，为什么没有float: center？我的答案是： 1.text-align: center已经可以实现内联元素的居中效果 2.在一行中使...

:not(X)是CSS中的一个否定伪类（选择器），并且接受一个简单的选择器作为参数。本质上，可以使任一其他选择器（作为参数）。 :not（选择器）匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。 {代码...} 在这个例子中，有一个class为“different”的li元素： {代码...} CSS将会选择除了c...

像我之前提到的那样，文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层，背景层可以是完全透明或者其它颜色，也可以是一张图片。此背景层由8个CSS属性（加上1个简写的属性）控制。

CSS中属性的值有着许多种格式。为了让用户代理（即浏览器）能够识别一个值是否有效，则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型，在规范中用<this>的形式标识。

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。

上一篇我们介绍了如何利用before和after伪元素来做Material Design风格的按钮，里头关键的技术就在于活用边框宽度和div本体宽高，因此这篇再加码一个效果，就是纯粹利用CSS，让“单一个”div，从正三角形变换为正八边形（单一div最多只能做到正八边形），最后再搭配动画的效果，变成正多边形的变换动画，也由于正多边形需...

CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子，可能只是几行代码，但是添加到Web应用程序中，却会让它增色不少。如下是我们将在本教程中构建的代码

其实Material Design的扁平化icon按钮，这类型的按钮往往只利用几何色块的变化，就能抓住使用者的眼光，并且从几何形状中明白按钮的含意，这也是Material Design非常强调的设计理念和精髓。

CSS预处理器，如Sass和Less，使得CSS代码易于组织和维护。通过提供变量、混合、循环等特性，使得CSS具有动态编写的能力，从而减少重复性工作，提高开发速度。

最近，我从 Grover网站上发现以一个好玩儿的悬停动画，也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。怎样才能达到这个效果，使我们的网站脱颖而出呢？其实，它并不像你想象的那么难！

在之前所提到绘制正多边形的方法，算是纯粹利用伪元素来完成，不过坦白说还有另外一种方法，可以将单一div做更多形状的变换，这种方法就是CSS3的“clip-path”，这个“clip-path”看起来有点眼熟，因为它原本就存在于SVG里头，利用掩码（剪裁）的方法，连接坐标绘制掩码区域，就可以做出许多不同的形状，让底色或底图显现，...

我们理解了CSS 3D的个中原理之后，废话就不用多说，直接来画正多面体吧！只要正多面体可以画出来，基本上在CSS 3D的领域里，大概就没甚么难得倒我们了。

CSS中,当text-align属性被赋值为justify时,text-justify属性经常被用来和text-align属性一起设置文本两端对齐的方式。

事实确实如此，CSS不同于传统的编程，且具有缺陷，同任何标准化编程语言相比，使用起来都更为困难。这是由于CSS被设计为一种描绘界面的方式，而不是以编程形式实现该界面，例如canvas的API。CSS的设计初衷就不同于传统编程语言。

前面介绍过CSS里的::before和::after这两个伪元素，以及content相关的用法，这篇将针对content搭配counter（计数器）进行一些有趣的应用，相信熟练之后搞不好很好玩也说不定。

浮动到底是做什么呢？他们是如何影响相关元素的盒模型的呢？浮动的元素与内联元素有什么不同呢？制定浮动元素的位置的具体规则是什么？clear属性是如何工作的，并且它的作用是什么？

写过 HTML upvote arrow（向上箭头），speech bubble（对话气泡）或其他类似的尖角元素的人都知道，为了创建一个纯 CSS 实现的三角形，必须使用某些 Hack。最流行的两种方式是通过 边框实现，或 Unicode 字符。

正八面体与正十二面体，这两个正多面体虽然组合的面比较多，不过因为具备了对称性，所以只需要制作出一半的结构，另外一半再用反转的方式接在一起即可。

对大部分的人来说（如果你写过CSS），Flexbox 可以说是完美，但它是否适合所有场景呢？ 简而言之，我会给出几种可用的场景，需要你重新思考 Flexbox 模型的使用。 顺便说一句，本人是 Flexbox 的忠实粉丝，曾写过一篇 Flexbox 详解 ，可以算得上最全面的文章了。 当然，我们应该了解该如何使用 Flexbox，哪些情况不应该...

好，我们聊聊vertical-align。这个属性主要目的用于将相邻的文本与元素对齐。而实际上，verticle-algin可以在不同上下文中灵活地对齐元素，以及进行细粒度的控制，不必知道元素的大小。元素仍然在文档流中，因而其他元素可以根据它们大小的变化进行相应的调整。一个有用的例子就是居中图标与旁边的文本。

最近因为一些网页的需要，比较深入的使用了CSS的“伪元素”（Pseudo Element），发现原来不只是用用before或after而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。

对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。