本文样式代码采用 SCSS。浏览器兼容性为 IE6+。 你的网页中，不可能没有使用过 margin。大多数情况下，我们采用的都是正数的 margin 值，可能有时候会用到负的 margin 值。在我们的印象中，负的 margin 值就类似于浏览器的 hack 一样，不被人接受。…

flex 是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了（虽然现在还有很多不支持 flex 的浏览器）。然而在移动开发中，本来绝大多数浏览器（包括安卓 2.3 以上的自带浏览器）都支持的属性，偏偏有个例外，就是国产某某 X5 内核神器（不知哪个版本的 webkit，仅支持 display:box），自主研发这东西也不好多说什么了

原文地址：11 things I learned reading the flexbox spec 原文作者：David Gilbertson 译文出自：掘金翻译计划 译者：XatMassacrE 校对者：zaraguo，reid3290 读完 flexbox 细则之后学到的 …

前几天看了一篇文章 ， 颠覆了我对 CSS 认识，心中无数次蹦出一个念头：'卧槽，卧槽，还能特么这么用，这特么太叼了' ... 本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、::after 伪元素，transparent 、borde…

相信很多人和我在学习前端差不多的时候就听说过了圣杯布局与双飞翼布局。关于取名无非是觉得长得像圣杯，或者是长得像小鸟。至于其中的区别也只有一小点，其中主要的思想可谓是基本一致！

实用而论，不想了解具体原理的同学只要记住一点即可：在配置好环境的情况下，拿到设计稿并发现需要使用固定宽高比元素的时候，在 css 中做好 px（设计稿中的 px）与 rem 换算就行（即便这个过程也有不少偷懒的办法, 减轻工作量）。

background 属性的简写用法的介绍以及常见背景属性的理解。

2009 年，W3C 提出了一种新的方案 ----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。