css总结

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;
}