yuanyuanbyte/Blog

CSS系列之隐藏页面元素的方式

yuanyuanbyte opened this issue · 0 comments

透明

  • opacity:0:本质上是将元素的透明度将为0,就看起来隐藏了,但是依然占据空间且可以交互
  • visibility:hidden: 与上一个方法类似的效果,占据空间,但是不可以交互了

溢出

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

文档流

  • display:none: 这个是彻底隐藏了元素,元素从文档流中消失,既不占据空间也不交互,也不影响布局

层级

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

欧几里德平面(二维平面)上的缩放

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

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素,同时可以在不同的方向设置不同的缩放值。

在这里插入图片描述

scale() 仅适用于在欧几里德平面(二维平面)上的变换。如果需要进行空间中的缩放,必须使用 scale3D() 。