- 完全隐藏:元素从渲染树消失,不占空间。
- 视觉上的隐藏:屏幕上看不见,占据空间。
- 语义上的隐藏:屏幕软件不可读,但正常占据空间。
屏幕并不是唯一的输出机制,比如说屏幕上看不见的元素(隐藏的元素),其中一些依然能够被屏幕软件阅读出来(因为读屏软件依赖于可访问性树来阐述)。
- 完全隐藏
(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>