css元素的隐藏和显示

需求：在页面需要元素不可见
思路：利用css原理实现元素的隐藏

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

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

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

.hidden {
    display: none;
}

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

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

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

      
.hidden {
    visibility: hidden;
}

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

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