- 首先什么叫隐藏元素，大家第一反应就是 display: none 元素就被隐藏了；
- 没错，这确实是隐藏元素的一种，但是太过于片面；隐藏元素实际上可以分为 3 大类：
- 完全隐藏：元素从渲染树中消失，不占据空间；
- 视觉上的隐藏：屏幕中不可见，占据空间；
- 语义上的隐藏：读屏软件不可读，但正常占据空间；
完全隐藏
display 属性
首先就是设置
display: none元素就被隐藏了，并且是不占据空间的；
hidden 属性
这是 HTML5 新增属性，相当于
display: none直接写在元素上面；
<div hidden></div>
视觉上隐藏
opacity 属性
将透明度设置为 0 ，视觉上就会变得不可见，元素还占据着位置；
opacity: 0;
visibility 属性
通过 CSS 中的 visibility 属性来隐藏元素，使其不可见，但是仍然会占位；
visibility: hidden;
绝对定位
设置 posoition 为 absolute 或 fixed ，通过设置 top、left 等值，将其移出可视区域；
position: absolute;
left: -999px;
top: -999px;
margin 属性
通过设置 margin 值，将其移出可视区域范围（可视区域占位）；
margin-left: -99999px;
设置宽高为 0
就是将元素的 margin、border、padding、height 和 width 等影响元素盒模型的属性设置成 0 ，如果元素内有子元素或内容，还应该设置其 overflow: hidden 来隐藏其子元素；
width: 0px;
height: 0px;
overflow: hidden;
裁剪元素
通过 clip-path 属性，这个属性比较新，浏览器兼容性也会比较差，但是了解一下还是非常有必要的；
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
transform 属性
/* 缩小 */
transform: scale(0);
/* 旋转 90° */
transform: rotate(90deg);
/* 位移 */
transform: translate(-9999px);
语义上隐藏
aria-hidden 属性
通过设置 aria-hidden 属性为 true 使读屏软件不可读，但是元素仍然占据空间并且可见；
<div aria-hidden="true"></div>
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级📦 等高布局实战套路
上一篇
评论
