元素隐藏 css
参考:http://www.zhangxinxu.com/wordpress/2011/03/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9relativeabsolute%E5%AE%9A%E4%BD%8D%E7%B3%BB%E5%88%97%EF%BC%88%E4%B8%89%EF%BC%89/
absolute正业之元素隐藏
元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与display:block/inline来实现DOM元素的显隐控制,那你就out了。就元素的显示与隐藏实现,使用display在有些时候算是比较糟糕的方法了。
控制元素显隐的方法很多,但是本文不是讲元素显隐控制的,所以,只讲与absolute相关的一些方法。
absolute属性相关的隐藏方法,我知道的有三种,分别如下:
.hidden{
position:absolute;
top:-9999em;
}
.hidden{
position:absolute;
visibility:hidden;
}
.hidden{
position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
使用absolute属性控制DOM元素的显隐有三个关键点:页面可用性,回流与渲染,配合JavaScript的控制。
元素隐藏 css的更多相关文章
- CSS中如何让元素隐藏
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不 ...
- css元素隐藏(display:none和visibility:hidden)
在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css display:none 当使用该样式的时候,HTML元素的宽高等 ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用
您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...
- CSS元素隐藏的display和visibility
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间, ...
- CSS元素隐藏
{ display: none; /* 不占据空间,无法点击 */ } /*************************************************************** ...
- 你可能不知道的CSS元素隐藏“失效”以其妙用
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀--一个一个看. { display: none; /* 不占据空 ...
- HTML元素隐藏和显示
在web前端开发过程中,经常会用到隐藏和显示元素的方法 总结:1.通过JS或Jquery控制 2.通过CSS样式控制 一.Js或jquery (jquery为例) 1.隐藏元素 使用 ...
- 使用chrome查看页面元素的css样式
使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...
随机推荐
- C++和C#实现剪切板数据交互
c#端由于system.windows.form自带的剪切板功能太少,所以写了一个Helper类把接口转了出来.这样就可以用不同的uint的id了. 并且自带的剪切板必须执行在[STAThread]模 ...
- Atitit.故障排除系列---php 程序网站数据库错误排除流程
Atitit.故障排除系列---php 程序网站数据库错误排除流程 Php页面报告的错误不能定位到myusql的db配置上...字说是db conn err Mysql 接入错误...大概查看哈能不能 ...
- 对象.delegate=self的理解
整理自:http://www.cocoachina.com/ask/questions/show/87430 各位大神,对象.delegate=self是啥意思,委托的意思不就是自己的任务交给其他人去 ...
- JMeter学习笔记(二)
3.JMeter测试计划要素 JMeter中一个脚本即是一个测试计划,也是一个管理单元.JMeter的请求模拟与并发数(设置线程数,一个线程代表一个虚拟用户)设置都在脚本文件中一起设置. 要素一:脚本 ...
- ThreadPool has stuck threads
weblogic 10后台出现警告,原因:ThreadPool has stuck threads 在WEBLOGIC中如果一个线程执行时间超过了Stuck Thread Max Time规定的时间, ...
- Hive Compiler过程
通过Parser将HiveQL转换成AST,通过Semantic Analyzer将AST转换为QB,通过Logical Plan Generator将QB转换成Operator Tree,通过Log ...
- c#开源项目[转]
一.AOP框架 Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了把方面(aspects)部署到运行时代码,而其它AOP框架依赖配置文件的方式.这种部署方面(as ...
- st16c554
/* * st16c554.c * * TWO ST16C554 driver for AMCC PPC405EP * * Author: Li Zhi You/Zhu jiang <godis ...
- 基于Ambari构建自己的大数据平台产品
目前市场上常见的企业级大数据平台型的产品主流的有两个,一个是Cloudera公司推出的CDH,一个是Hortonworks公司推出的一套HDP,其中HDP是以开源的Ambari作为一个管理监控工具,C ...
- 利用CSS生成精美细线Table表格
精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差.这里推荐直接使用css来产生一个细线表格. 使用方法也很简单: 第一 ...