一、display:none(常用)
设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏元素。display属性规定元素应该生成的框的类型,当其值为“none”时可以规定元素不生成框,隐藏该元素,可以理解成在页面中把该元素删除掉一样。
二、 visibility: hidden(常用)
在css中visibility属性规定元素是否可见,其中visible为元素可见,hidden为元素不可见,且不占据位置。所有主流浏览器都支持visibility属性,但是,任何的版本的Internet Explorer【包括 IE8】都不支持。
三、 opacity: 0
属性表示元素的透明度,而将元素的透明度设置为0后,元素也是隐藏的。 但是依旧存在页面中,占据位置。它也同样影响用户交互 。
四、 overflow:hidden
overflow翻译成中文是漫出、溢出的意思;将overflow的属性设置hidden可以实现元素隐藏,但是这个是超出盒子的部分隐藏,有局限性。
五、移出视口
利用定位将元素的top和left值设为足够大的负数,使它移出屏幕在屏幕上看不见。 如用left: -9999px或者transform: translateX(-9999px);将元素移出视口外部。
六、z-index
在css中可以通过将元素的 z-index 属性设置为负值,以实现元素的隐藏。这实际上就是将元素放在了我们看不到的层。 如:z-index:-1
七、缩小尺寸
在css中, 可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸以实现元素的隐藏。可能还需要应用 overflow: hidden; 来确保内容不会溢出。 如:height:0; padding:0; overflow:hidden
八.覆盖另一个元素(代码太多,不推荐)
在css中, 通过在元素的上面放置与背景颜色相同的元素,可以在视觉上隐藏一个元素。使用::after伪元素来实现:
div::after { position: absolute; content: ''; top: 0; bottom: 100%; left: 0; right: 0; background-color: #fff; }
九、颜色透明度
在css中, 可以将元素的color、background-color 和 border-color 等属性设置为rgba(0,0,0,0),这样就会使元素完全透明
十、 clip-path
在css中, clip-path 属性可以创建一个剪辑区域,用于确定元素的哪些部分是可见的。使用 clip-path: circle(0)
可以将元素进行隐藏。 如:div{clip-path:circle(0)}