利用css对于Dom元素的隐藏
隐藏类型
屏幕并不是唯一的输出机制，比如说屏幕上看不见的元素（隐藏的元素），其中一些依然能够被读屏软件阅读出来（因为读屏软件依赖于可访问性树来阐述）。为了消除它们之间的歧义，我们将其归为三大类：
- 完全隐藏：元素从DOM树中消失，不占据空间。
- 视觉上的隐藏：屏幕中不可见，占据空间。
- 语义上的隐藏：读屏软件不可读，但正常占据空间。
完全隐藏
1.display 属性
2.hidden 属性
HTML5 新增属性，相当于 display: none
视觉上的隐藏,在页面中还存在
3.利用 position 和 盒模型 将元素移出可视区范围
设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域。
1
2
| position:absolute;
left: -999px;
|
设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。
1
2
| position: relative;
left: -999px;
|
设置 margin 值，将其移出可视区域范围（可视区域占位）。
1
2
| margin-left: -99999px;
height: 0;
|
3.利用 transfrom
缩放
1
2
| transform: scale(0);
height: 0;
|
移动 translateX, translateY
1
2
| transform: translateX(-99999px);
height: 0
|
旋转 rotate
1
| transform: rotateY(90deg) //直角在界面上形成线性视觉屏蔽
|
4.设置其大小为0
宽高为0，字体大小为0：
1
2
3
| height: 0;
width: 0;
font-size: 0;
|
宽高为0，超出隐藏:
1
2
3
| height: 0;
width: 0;
overflow: hidden;
|
5.设置透明度为0
6.visibility属性
7.层级覆盖，z-index 属性
1
2
| position: relative;
z-index: -999;
|
再设置一个层级较高的元素覆盖在此元素上。#####
8.clip-path 裁剪
1
| clip-path: polygon(0 0, 0 0, 0 0, 0 0);
|
语义上的隐藏
