转载自 http://dwz.cn/JcXMM 你了解 CSS 吗？在六个月前，我提供了一个在线 免费 CSS 测试 系统。测试结果表明很多一线开发者并没有如他们所想的那样了解 CSS。目前有超过 3,000 人参加了该项测试，平均成绩只有 55 分。 但是，嘿，平均分本身并没有什么意思

演示 | 下载 今天我们来探索一下 Carl Philipe Brenner的网站 上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给 span 标签的宽或者高做了

自从Twitter推出 Bootstrap 以来，它的推广程度就像火箭发射一样节节攀升。这个广受欢迎的CSS框架为众多网站提供了响应式网格系统，预定义样式的组件与 JavaScript插件 。 Bootstrap 的设计初衷之一就是实用。当你要新建网站时， Bootstrap 绝对是一个节约时

box-sizing: border-box; 则div 设置的宽高将包含边框及padding 语法 box-sizing:content-box|border-box|inherit; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。

摘自 阮一峰SASS用法指南 学过CSS的人都知道，它不是一种编程语言。 你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯

市面上我们常常会看到各种各样的设计模式书籍，Java设计模式、C#设计模式、Ruby设计模式等等。在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料，即使在网上找到类似内容，细细一看之下才发觉是南辕北辙。经过浩瀚文章搜索发掘下依旧一无所获之后，

曾几何时，display:inline-block 已经深入「大街小巷」，随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了，上面的代码是为了兼容 IE6、7而已。那么你真的了解 inline-block 了吗？本文将

近日，微博上有朋友比较纠结 未知高度的文本垂直居中 问题。这个和「未知高度图片垂直居中」有些类似，但是有一些细节需要注意。 这里有之前写的一个 未知宽高对话框的垂直居中 （拖动改变大小看是不是依然居中？），只不过对话框是相对于 viewport（视口）

css框架其实很早就出现了，他产生的原因是css代码跟其他代码一样，很多时候是高度重复性的，经验丰富的工程师们都会总结出自己的可复用代码，以便应用到不同的项目之中，其中优秀且知名度高的就成了我们所熟悉的css框架，其实就是一套具有普适性的css代码。