css之隐藏元素

时间:2023-02-24 11:57:53


visibility: hidden;
这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在

opacity: 0; CSS3属性,设置0可以使一个元素完全透明

position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外

display: none; 元素会变得不可见,并且不会再占用文档的空间

transform: scale(0); 将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留


<div hidden="hidden"> HTML5属性,效果和display:none;相同,但这个属性用于记录一个元素的状态
height: 0; 将元素高度设为 0 ,并消除边框


filter: blur(0); CSS3属性,将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中

overflow:hidden : 这个只隐藏元素溢出的部分,但是占据空间且不可交互

z-index:-9999 : 原理是将层级放到底部,这样就被覆盖了,看起来隐藏了

transform: scale(0,0) : 平⾯变换,将元素缩放为0,但是依然占据空间,但不可交互

还有⼀些靠绝对定位把元素移到可视区域外,或者⽤clip-path进⾏裁剪的操作过于Hack,就不提了。