江苏龙网

  1. 主页 > 生活百科 > >

css隐藏页面元素的多种方法

css

在平常的样式排版中，我们经常遇到将某个模块隐藏，下面我整理了一下隐藏元素的多种方法以及对比（有的占据空间，有的不占据空间 。有的可以点击，有的不能点击 。）：
( 一 ) display: none;
特点：元素不可见，不占据空间，无法响应点击事件 。
.hide{ display: none; }( 二 ) opacity: 0; ( IE8以下版本：filter:Alpha(opacity=50) ）
特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件 。
.hide{ opacity: 0; filter:Alpha(opacity=0); }( 三 ) visibility: hidden;
特点：元素不可见，占据页面空间，无法响应点击事件 。
 
.hide{ visibility: hidden;}( 四 ) transform: scale(0);
( 1 ) zoom: 0.1; transform: scale(0);
特点：元素不可见，IE 6 7 9 不占据页面空间，IE8 谷歌 火狐 欧朋 等浏览器占据空间，无法响应点击事件 。
 
.hide{ zoom: 0.1; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); }( 2 ) position: absolute; zoom: 0.1; transform: scale(0);
特点：元素不可见，不占据页面空间，无法响应点击事件 。
 
.hide{ position: absolute; zoom: 0.1; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); }( 五 ) width: 0; height: 0; 配合overflow: hidden;
特点：元素不可见，不占据页面空间，无法响应点击事件 。但 padding值 和 margin值 依然存在，需要将内外边距都调整为0 。
.hide{ display: inline-block; width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }( 六 ) position: absolute; left: -200%; 或者 top: -200%；等，父级需要相对定位，这种left top值可以根据具体的实际情况去定义
特点：元素不可见，不占据页面空间，无法响应点击事件 。
 
. father{ position: relative; overflow: hidden;}.hide{ position: absolute; left: -200%;//或top: -200%; }( 七 ) clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)
特点：元素不可见，占据页面空间，无法响应点击事件 。
 
.hide{ float: left; width: 150px; margin: 20px; clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); }( 八 ) margin: top | right | bottom | left ;父级添加overflow: hidden; (margin的值 一定要小于（子级的宽度加上边距的总和的负数）)
特点：元素不可见，不占据页面空间，无法响应点击事件 。
 
.father{ width: 400px; height: 400px; overflow: hidden;}.hide{ display: inline-block; width: 200px; height: 200px; margin-left: -200px;}以上就是几种隐藏元素的方法，我在以前的面试中，也碰到了面试官提出的一些关于隐藏元素css的对比，查阅了一些资料，做了以下整理：
( 一 ) display: none 和 visibility: hidden 的区别
【css隐藏页面元素的多种方法】1. 占据页面空间( display: none 将元素隐藏后，在页面是是不占有空间位置的，而visibility: hidden 将元素隐藏后，还保留着元素大小的空间位置 ) ；
2. display: none 影响了 reflow和repaint(回流与重绘)，而visibility: hidden并没有影响
3. 某个模块添加了display: none; 它下面的任何子级都会被隐藏，而添加了visibility: hidden，子级一旦有添加visibility: visible的css，该子级将不会被隐藏 。
( 二 ) display: none 和 opacity: 0的区别
1. 占据页面空间( display: none 将元素隐藏后，在页面是是不占有空间位置的，而opacity: 0 只是改变了元素的透明度将其隐藏，还保留着元素大小的空间位置 ) ；
2. display: none 不会被子类继承，但是子类一样不会显示 。opacity: 0 会被子类继承，但不能像visibility的属性一样，给子类添加opacity:1，并不能将子类显示 。
3. css3 transition 属性对display：none 并无效果，但对opacity 则有效果 。（附加一句，对visibility: hidden也无效果）




    推荐阅读


    上一篇：ps蒙版的高级用法，亮度蒙版是什么？应用图像详细教程

    下一篇：梦见和老婆同床是怎么回事 孕妇梦到跟自己老公同房是什么