1. css中的role属性
html 里面的 role 本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。
role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button，
比如：
<div role="checkbox" aria-checked="checked"></div>
辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。
HTML5 aria-* and role
发现aria的意思是Accessible Rich Internet Application。 Accessible一般是为不方便的人士提供的功能，比如windows的放大镜，语音朗读，高对比度主题等。
google到了一个youtube的视频，讲解的很清楚，有代码有示例。估计是Google Developer Day 2011的分享演讲。真是个有责任感人性化的公司啊！
http://www.youtube.com/watch?v=pwm73Pe5xb8
主要内容是说明并演示了HTML5针对html tag增加的属性：role 和 aria-*。
role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。
而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。比如，
<div role="checkbox" aria-checked="checked"></div>
辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。
2. css中的: box-sizing: border-box;属性
当设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
.grid-container *{
box-sizing: border-box;
}
3. :after伪类+content 清除浮动的影响(http://www.zhangxinxu.com/wordpress/2010/09/after%E4%BC%AA%E7%B1%BBcontent%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/)
这个技巧我想很多同行都用过，所以，这里仅简单介绍下。
有点经验的同行应该知道，一般不含包裹属性的div内部有浮动元素的话，那么这个浮动元素会让此div的高度塌陷。如下例子：
.box{padding:10px; background:gray;}
.l{float:left;}
<div class="box">
<img class="l" data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>
结果如下图：
正如文章开始提到的，IE8+和其他所有现代浏览器都支持:after+content，所以，对于这些浏览器我们可以使用:after+content方法清除浮动造成的塌陷。使用如下：
.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
这样就可以让IE8+和其他浏览器清除浮动破坏带来的塌陷问题了。至于暂不支持:after伪类的IE6/IE7，我们可以使用IE私有的zoom缩放属性让div远离浮动的破坏。故，双剑合璧下就是：
.fix{*zoom:1;}
.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
4 :居中
1. 使用position: absolute;
.ele {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}