css元素的显示和隐藏

css隐藏方法

1、使用display:none;方法。
2、使用visibility: hidden;方法。

首先先来看一下display和visibility的属性
display属性设置元素的显示方式，对应脚本特性为display，可选值为none、block和inline，各值的说明如下：

none：隐藏元素，不保留元素显示时的空间。
block：块方式显示元素。
inline：以内嵌方式显示元素。
inline-block：对象显示为内嵌元素，但所有子对象都显示为块元素，
            相邻的内嵌元素将显示在同一行，允许空格。

visibility属性设置是否显示元素，对应的脚本特性为visibility，可选值为inherit、hidden和visible，各值的说明如下：

inherit ：visibility属性设置。
hidden ：隐藏元素，但保留其所占空间。
visible ：显示元素(默认值)。

使用的时候的说明：
display:none;时隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域。
dispaly:block;显示已经隐藏的html元素，如果别的元素占有了该空间时，他将下移，空间重新别原来的元素占有。
visibility:hidden;隐藏该元素，真正的隐藏，但他还占有那块空间。
visibility:visible;让元素显示.。

下面是我总结的一些比较好的隐藏实践。
1.如果希望元素不可见，同时不占据空间，辅助设备无法访问，但资源有加载，DOM 可访问，则可以直接使用 display:none 隐藏。例如：

 .div {
        display: none;
  }

2.如果希望元素不可见，同时不占据空间，辅助设备无法访问，但显隐的时候可以有
transition 淡入淡出效果，则可以使用：

 .hidden {
            position: absolute;
            visibility: hidden;
  }

3.如果希望元素不可见，不能点击，辅助设备无法访问，但占据空间保留，则可以使用
visibility:hidden 隐藏。例如：

.vh {
        visibility: hidden;
  }

4.如果希望元素不可见，不能点击，但占据空间，且键盘可访问，则可以试试 relative
隐藏。例如，如果条件允许，也就是和层叠上下文之间存在设置了背景色的父元素，
则也可以使用更友好的 z-index 负值隐藏。例如：

.lower {
            position: relative; 
            z-index: -1;
  }

5.如果希望元素不可见，但可以点击，而且不占据空间，则可以使用透明度。例如：

.opacity {
              position: absolute; 
              opacity: 0; 
              filter: Alpha(opacity=0); 
  }

6.如果单纯希望元素看不见，但位置保留，依然可以点可以选，则直接让透明度为 0。
例如：

.opacity {
              opacity: 0; 
               filter: Alpha(opacity=0); 
  }

下面我就用例子来讲解，其他的不多说。

html代码：

 <div class="wraper">
        <div class="box_one"></div>
        <div class="box_two"></div>
    </div>

css代码：

   .wraper {
        width: 300px;
        height: 300px;
        border: 2px solid red;
    }

    .box_one {
        width: 100px;
        height: 100px;
        border: 2px solid blue;
        background: yellow;
    }


    .box_two {
        width: 150px;
        height: 150px;
        border: 2px solid blue;
        background: aqua;
    }

效果图：

接下来先对.box_one进行visibility: hidden;隐藏，效果图如下，我们会发现div虽然隐藏了，可是依旧会占据位置。

我们再对.box_one换成display:none;隐藏，效果图如下，我们会发现它确实隐藏了，不过位置被下面的.box_two顶替了。