隐藏页面在元素的方法

1. 完全隐藏：元素从渲染树消失，不占空间。
2. 视觉上的隐藏：屏幕上看不见，占据空间。
3. 语义上的隐藏：屏幕软件不可读，但正常占据空间。

屏幕并不是唯一的输出机制，比如说屏幕上看不见的元素（隐藏的元素），其中一些依然能够被屏幕软件阅读出来（因为读屏软件依赖于可访问性树来阐述）。

• 完全隐藏

（1）display属性

display: none;

（2）hidden属性 H5新增属性

<div didden></div>   

• 视觉上的隐藏

（1）设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域。

position: absolute;
left: -999999px;

(2) 设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。

position: relative;
left: -999999px;
height: 0；

(3) 设置 margin 值，将其移出可视区域范围（可视区域占位）。

margin-left: -999999px;
height: 0;

• 语义上的隐藏

                aria-hidden 属性  读屏软件不可读，占据空间，可见。

<div aria-hidden="true"></div>