CSS Grid Layout（网格/栅格布局）是 CSS 最强大的布局系统，随着设备和浏览器的升级，将会是未来的主流的布局方案之一。
一、介绍(Introduction)
概述(Basic)
CSS Grid Layout 简称为Grid，网上普遍译为网格，其实更规范的说法应为栅格。
栅格对有经验的 UI 和 FE 来说并不陌生，肯定会想到栅格系统(Grid Systems)。
这“系统”早在欧洲中世纪就已经出现，当时主要用于文字排版，随着时间的推移逐步发展到平面及其他“设计”领域。
在我印象中 08~09 年左右，网页栅格化设计(Grid Design)已经出现并被广泛使用，所定义的12栅格、24栅格等规范方案仍一直被沿用至今。用通俗的方式来讲：就是以一定规则的网格阵列，规范化网页布局。
CSS Grid包含了栅格化设计的特性，是第一个专门为解决布局问题而创建的CSS 模块。如果你熟悉栅格系统和栅格化设计那对栅格布局的理解会起到一定帮助。
好的栅格布局，对于模块、元素而言都有规律可循，能在不同尺寸/分辨率下呈现最优的方式，使网页更灵活和易于扩展。但同时也考验设计师，对于不同尺寸的把握，针对前端来说也是如此。
之前使用栅格需要用到Bootstrap等的框架，并且每个框架都有一套属于自己的栅格规范，现在网格布局使我们可以更为简单的实现，无需依赖框架。 [ 查看全文... ]
CSS BEM 解读
概要
BEM 分别代表着：Block（块）、Element（元素）、Modifier（修饰符），是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出。其目的是将用户界面划分成独立的（模）块，使开发更为简单和快速，利于团队协作开发。
特点
- 组件化/模块化的开发思路。
- 书写方式解耦化，不会造成命名空间的污染，如：
.xxx ul li 写法带来的潜在嵌套风险。
- 命名方式化扁平，避免样式层级过多而导致的解析效率降低，渲染开销变大。
- 组件结构独立化，减少样式冲突，可以将已开完成的组件快速应用到新项目中。
- 有着较好的维护性、易读性、灵活性。 [ 查看全文... ]
在一次聊天中讨论到如何利用CSS来制作一个按钮，不但能自适应宽高，并且还要在不实用图片的情况下，让按钮有类似“外描边”、“内描边”和圆角的效果，并且兼容IE6、IE7。所以今天特地花了点时间来做这个。
当完成以后，发现单纯的按钮有点单调，就想加点ICON来美化一下。可既然按钮都是用CSS来完成，那ICON还用图片来显示，是否有些背道而驰，所以仍然利用CSS属性来给按钮增添我们所需的图标。此时在保证“低配用户”能正常显示的情况下，也加入一些CSS3属性，起到渐进增强的目的，让“高级用户”能够得到更好的呈现效果。
这样做的好处在于按钮和图标颜色都能通过CSS来调整，维护起来比较方便。还有就是CSS的渲染速度比较快，同时还减少了HTTP请求量。
不过，并不是说用CSS必定比图片好，关键还是要根据实际环境和需求，合理使用才是关键。
本例兼容：IE6-10、Chrome、Safari、Opera。 [ 查看全文... ]
图片水平垂直居中、文字（多行文字）水平垂直居中，这是个老生常谈的问题，也经常有人提及这个问题，至此写个案例作为备忘。
主要用到的CSS属性就是display:table-cell[指定对象作为表格单元格。类同于html的td标签]。应用与已知外层容器宽高，但内部图片大小和文字数量未知的情况。
注：使用display:table-cell的时候，当前元素不支持margin和position属性，这个问题往往容易被人忽略。 [ 查看全文... ]
现在常常能看到一些网站（如：新浪微博和花瓣）导航条或工具栏固定在网页的顶部或其他地方。这样的布局方式，能便于用户点击和“曝光率”，不用每次都要把网页拖动到某个特定位置才能点击或看到。
其实这样的布局方式很早就有，只是没有那么个契机推广开吧。做起来也不复杂，只要设置一个小小的属性“position:fixed”便能完成，最关键的无不呼在于要兼容IE6而已。
首先我们来看HTML代码，是不是超简单？这里提供的只是一个简单的框架，实际应用的时候，只要把想要的元素添加东西就在这区域内加就行。
HTML CODE:
<div id="header">Default header. No absolute and fixed.</div>
<div id="topToolbar">Fixed at the top of the Toolbar.</div>
<div id="content">
<p>此处省略1000字...</p>
</div>
<div id="bottomToolbar">Fixed at the bottom of the Toolbar. By Bluesdream.com</div>
[ 查看全文... ]
今天的例子中，我主要想讲的是transform-style:preserve-3d和box-sizing:border-box这两个属性。
对于preserve-3d，这里要说明的是，它只影响这个元素的子元素（二级元素），孙元素（三级元素）如果也想拥有3D模式，那么就必须给它的上级元素（父元素）也添加preserve-3d。
box-sizing是我们平时比较少接触到的属性，其分辨有2个值content-box和border-box。
content-box：此属性表现为标准模式下的盒模型（当我们设置元素的width和height时，它的宽度不包括border和padding。例：width:100px; border-width:10px; 元素实际宽度为220px;）
border-box：此属性表现为怪异模式下的盒模型（和content-box相反，它的宽度包含border和padding。例：width:100px; border-width:10px; 此时的border相当于内边距，元素实际宽度仍为200px;）
好了，接下来我们就看例子吧：
[ 查看全文... ]
