CSS中的元素隐藏方式
来源:互联网 发布:yum install Firefox 编辑:程序博客网 时间:2024/06/05 00:12
前段时间,在写一个注册框时,先将该注册框隐藏,当点击按钮后显示。谁知隐藏后会遮挡住其他按钮,使其失效。后来查找资料,才发现是因为我选择隐藏方式的问题。该注册框隐藏后,仍然占有内存,点击时,可以运行。
在隐藏元素的方式中,主要有以下思路:
1、通过元素位移来进行“显示隐藏”。
2、利用display、 Visibility等属性。
3、利用z-index来调整元素的堆叠顺序。
4、利用opacity调整透明度。
5、调整元素的长宽。
至于这些方式的内存占用情况,有位博主早已有详细解释,
文章链接为(http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/)
以下内容,是我从该博文上的部分摘录。
{ display: none; /* 不占据空间,无法点击 */ }
{ visibility: hidden; /* 占据空间,无法点击 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }
{ position: relative; top: -999em; /* 占据空间,无法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ }
{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /*
不占据空间,可以点击 */ }{
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ }{
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* 不占据空间,无法点击 */ }
- CSS中的元素隐藏方式
- css隐藏页面元素方式
- css常用的隐藏元素的方式
- css中元素的隐藏方式
- CSS中元素隐藏的几种方式
- CSS隐藏一个元素的几种方式及其不同
- CSS盒模型中的块级元素、行内元素、行内块级元素和隐藏元素
- 关于CSS元素隐藏
- CSS元素隐藏
- CSS元素隐藏“失效”
- CSS隐藏元素
- CSS隐藏元素
- 6.CSS中的隐藏元素display、visible、overflow
- 用 CSS 隐藏页面元素
- CSS隐藏元素的差异
- css 隐藏元素的方法
- 隐藏html元素的方式
- css元素隐藏各种方式原理及display:none和visibility:hidden
- Maven的使用
- 一篇文章学懂Shell脚本
- win10系统和压缩内存磁盘占用过高的解决方案
- beanstalkd常见问题解答
- 可伸缩右侧边栏导航菜单
- CSS中的元素隐藏方式
- 5.9 WebGIS留守儿童社区主界面设计
- ubuntu上Caffe使用OpenBLAS多线程加速
- This version of android studio is incompatible with the gradle version used.解决办法
- 创建linux--git服务器
- Linux学习之十grep及正则表达式(grep)
- Java 赋值与引用的数据内存模型
- Python seed() 函数&生成特定分布随机数的方法
- idea导入eclipse web项目