背景：最近高级前端工程师 刘小夕 在 github 上开了个每个工作日布一个前端相关题的 repo，怀着学习的心态我也参与其中，以下为我的回答，如果有不对的地方，非常欢迎各位指出。
隐藏类型
可见性屏幕可见可访问树
完全隐藏隐藏隐藏
语义上隐藏可见隐藏
视觉上隐藏隐藏可见
完全隐藏
此方法会让元素从渲染树中消失，渲染的时候不占据任何空间，且不可进行DOM操作。
hide{display: none;}复制代码
此方法相当于 display: none;
复制代码
语义上的隐藏
此方法使读屏软件不可读，但正常占据空间，且可进行DOM操作。
复制代码
视觉上的隐藏
此方法使肉眼不可见，但占据正常空间，且不可进行DOM操作。
hide{visibility: hidden;}复制代码
此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。
hide{opacity:0;}复制代码
此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。
hide{transform:scale(0, 0);}复制代码
此方法把要隐藏的DOM移出到可视位置，不占据正常流，且可进行DOM操作。
:root{--biu: -999999px;}hide{position: absolute;left:var(--biu);top:var(--biu);}复制代码
此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。
hide{clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);}复制代码
此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。
:root { --biu: rgba(0,0,0,0);}hide {border:1pxsolid currentcolor;color: var(--biu);background: currentcolor; ...andso on;}复制代码
网友评论