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增加的属性:rolearia-*

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>

  

结果如下图:
css总结

正如文章开始提到的,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;
}

  

上一篇:cocos2dx day 1


下一篇:[翻译]如何在HTML5中有效使用ARIA