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;
}
css总结的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- 一段比较有意思的代码——介绍system verilog中的新增幅值语句
system verilog中新加了很多幅值语句,虽然都只适用于阻塞幅值,但是在某些场合中非常实用. 下面是一段有意思的代码,覆盖了一些用法. package definitions; typedef ...
- setContentView R can not be resovled
原因:gen包下没有自动生成R.java的资源文件 解决办法:再次新建android application project,默认Theme为Holo Light With Dark Action B ...
- django--模板(七)
1.模板加载 一个项目可以有多个应用,每个应用下都可以有模板,思考模板的查找顺序?
- Broadcom有线网卡在Windows 8/8.1/10下使用系统自带驱动会断网的解决办法
出处:qiuyi21.cnblogs.com 1.下载最新正式版驱动程序 上Broadcom官方网站http://www.broadcom.com/support/ethernet_nic/downl ...
- T-SQL 比较N个指段取其中最大值
今天遇到一个需求,判断3个日期字段取其中最小的一个值,要Select中实现又不想写一堆的CASE,我是用如下方法实现的! select (select min(c) from( values(d1), ...
- Pycharm注册码
name : newasp===== LICENSE BEGIN =====09086-1204201000001EBwqd8wkmP2FM34Z05iXch1AkKI0bAod8jkIffywp2W ...
- 【Python】pymongo使用
官方文档:http://api.mongodb.com/python/current/index.html MongoReplicaSetClient:http://api.mongodb.com/p ...
- O2O迈进智能时代 百度构建“服务生态”
经历过山车式资本市场后,O2O领域正努力摆脱“低门槛”,或将迎来技术创新之争.在刚刚落幕的百度世界大会上,百度副总裁.百度糯米总经理曾良宣布:将以百度糯米.手机百度和百度地图为核心构建百度服务生态.在 ...
- 关于.net Microsoft.Office.Interop.Word组建操作word的问题,如何控制word表格单元格内部段落的样式。
控制word表格单元格内部文字样式.我要将数据导出到word当中,对于word表格一个单元格中的一段文字,要设置不同的样式,比如第一行文字作为标题要居中,加粗,第二行为正常的正文. 代码如下 publ ...
- TJI读书笔记16-异常处理
TJI读书笔记16-异常处理 概念 基本异常情形 异常的捕获 自定义异常 异常说明 捕获所有异常 栈轨迹 重新抛出异常 Java标准异常 使用finally 异常的限制 构造器 异常的匹配 其他乱七八 ...