【CSS】CSS 世界 -- 元素的显示与隐藏学习总结

一、Display 几种隐藏方式

1、希望元素不可见、不占据空间、辅助设备无法访问、不渲染

使用<script>标签：

<script type=“text/html”>
    <img src=“1.jpg">
</script>

获取<script>标签隐藏的内容：
script.innerHTML

2、希望元素不可见、不占据空间、辅助设备无法访问、有资源加载、DOM可访问

使用display:none隐藏

3、希望元素不可见、不占据空间、辅助设备无法访问、隐藏的时候可以有transition淡入淡出效果

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

4、元素不可见、不能点击、辅助设备无法访问，但是占据空间

   visibility：hidden

5、元素不可见、不能点击、不占据空间，但是键盘可以访问，使用clip进行裁剪处理

.clip {
    position: absolute;
    clip: rect(0 0 0 0);  // clip 属性剪裁绝对定位元素，唯一合法的形状值是：rect (top, right, bottom, left)
} 
.out {
    position: relative;
    left: -999em;
 }

6、元素不可见、不能点击、占据空间、可被键盘访问，利用绝对定位和z-index来设置隐藏

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

7、元素不可见、不占据空间、但是可以点击，可以使用透明度

.opacity {
    position: absolute; //position的作用是使元素脱离文档流，使其不占据空间
    opacity: 0;
    filter: Alpha(opacity=0);
}

8、单纯的想使元素不可见，位置保留也可以点击，可直接设置透明度为0

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

Display:none显示隐藏不会影响animation动画，但是会影响transition过渡效果的执行，所以transition往往和visibility搭配

二、Visibility与元素的隐显

1、visibility继承性

父元素设置 visibility:hidden，子元素也会看不见，究其原因是继承性，子元素继承了 visibility:hidden，但是，如果子元素设置了 visibility:visible，则子元素又会显示出来,这个和 display 隐藏有着质的区别。

应用场景： 用户上传头像，实时显示并裁减
实现方式： 模块外部容器设置 visibility:hidden，剪裁区域里面放一个加载效果，设置visibility:visible。图片尺寸获取成功后，再正常初始化，然后让外部容器 visibility 属性重置为 visible。这样体验就会好很多，用户只会看到“加载中→剪裁界面”，而不是“占 位界面→加载中→最终操作界面”。

2、visibility与css计数器

visibility:hidden 不会影响计数器的计数

3、visibility与transition

hover属性下，下述代码会在hover时显示target子元素，但是不会有过渡效果

.box > .target {
    display: none;
    position: absolute;
    opacity: 0;
    transition: opacity .25s;
}
.box:hover > .target {
    display: block;
    opacity: 1;
 }

下面的代码可以实target子元素现淡入淡出的过渡效果，这是由于CSS3 transition支持的CSS属性中有visibility，但是并没有 display。

.box > .target {
    position: absolute;
    opacity: 0;
    transition: opacity .25s;
    visibility: hidden;
}
.box:hover > .target {
    visibility: visible;
    opacity: 1; 
}