1.display: none: 渲染树不会渲染工具
2.visibility: hidden: 元素在页面中仍霸占空间，但是不会相应绑定的监听事宜。
3.opacity: 0: 元素在页面中仍旧霸占空间，并且能够相应元素绑定的监听事宜。
4.position: absolute: 通过利用绝对定位将元素移除可视区域内，以此来实现元素的隐蔽。
5.z-index: 负值:来使其他元素遮盖住该元素，以此来实现隐蔽。
6.clip/clip-path: 元素仍在页面中霸占位置，但是不会相应绑定的监听事宜。
7.transform: scale(0,0): 将元素缩放为 0，元素仍在页面中霸占位置，但是不会相应绑定的监听事宜。
8、color alpha 透明度
9、可以通过利用width、height、padding、border-width 或 font-size 来缩小元素的尺寸
10、覆盖另一个元素
11、transform 属性可以用于元素的平移、缩放、旋转或倾斜等。
1. visibility: hidden; 这个属性只是大略的隐蔽某个元素, 但是元素占用的空间任然存在 2. opacity: 0; 一个CSS3属性, 设置 0 可以使一个元素完备透明, 制作出和 visibility 一样的效果 。 与 visibility 比较, 它可以被 transition 和 animate 。3. position: absolute; 使元素分开文档流, 处于普通文档之上, 给它设置一个很大的 left 负值定位, 使元素定位在可见区域之外 。4. display: none; 元素会变得不可见, 并且不会再占用文档的空间 。5. transform: scale(0); 将一个元素设置为无限小, 这个元素将不可见 。 这个元素原来所在的位置将被保留 。6. HTML5 hidden attribute; hidden 属性的效果和 display:none; 相同, 这个属性用于记录一个元素的状态 。7. height: 0; overflow: hidden; 将元素在垂直方向上紧缩为0, 使元素消逝 。 只要元素没有可见的边框, 该技能就可以正常事情 。8. filter: blur(0); 将一个元素的模糊度设置为0, 从而使这个元素“消逝”在页面中 。display:none
设置元素的display为none是最常用的隐蔽元素的方法
.hide { display:none;}
将元素设置为display:none后，元素在页面年夜将彻底消逝
元素本身霸占的空间就会被其他元素霸占，也便是说它会导致浏览器的重排和重绘
消逝后，自身绑定的事宜不会触发，也不会有过渡效果
特点：元素不可见，不霸占空间，无法相应点击事宜
color alpha 透明度可以将元素的color、background-color 和 border-color 等属性设置为rgba(0,0,0,0)，这样就会使元素完备透明：
div { color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);}
这三个属性都是支持设置动画效果的，须要把稳，透明度不能运用于带有背景图片的元素，除非它们是利用 linear-gradient 或类似方法天生的。
Alpha 通道可以设置为：
transparent：完备透明（中间不能插入动画）；rgba(r, g, b, a)：赤色、绿色、蓝色和 alpha；hsla(h, s, l, a)：色相、饱和度、亮度和 alpha；#RRGGBBAA 或 #RGBA。transformtransform 属性可以用于元素的平移、缩放、旋转或倾斜等。可以利用 scale(0) 或者 translate(-9999px, 0px) 属性值来将元素隐蔽：
div { transform: scale(0);}div { translate(-9999px, 0px)}
transform 属性供应了出色的性能和硬件加速，由于元素被有效地移动到了单独的层中，并且可以在 2D 或 3D 中进行动画处理。原始的布局空间会保持原样，并不会受影响。利用这种办法隐蔽的元素不会触发任何事宜。
z-index可以通过将元素的 z-index 属性设置为负值，以实现元素的隐蔽。这实际上便是将元素放在了我们看不到的层。
div { z-index: -1;}position
position属性许可利用top、bottom、left、right 从页面中的默认位置移动元素。因此，绝对定位的元素可以通过左键：-9999px 等值移出屏幕：
div { position: absolute; left: -999px;}覆盖另一个元素
通过在元素的上面放置与背景颜色相同的元素，可以在视觉上隐蔽一个元素。下面来利用::after伪元向来实现：
div::after { position: absolute; content: ''; top: 0; bottom: 100%; left: 0; right: 0; background-color: #fff;}
虽然这从技能上讲是可以实现的，但是这样做须要更多的代码。
缩小尺寸可以通过利用width、height、padding、border-width 或 font-size 来缩小元素的尺寸以实现元素的隐蔽。可能还须要运用 overflow: hidden; 来确保内容不会溢出。
div { height: 0; padding: 0; overflow: hidden;}
利用这种形式我们可以在隐蔽过程中利用动画效果，并且他的性能会比 transform 好很多。
visibility:hidden设置元素的visibility为hidden也是一种常用的隐蔽元素的方法
从页面上仅仅是隐蔽该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘
.hidden{ visibility:hidden}
给人的效果是隐蔽了，以是他自身的事宜不会触发
特点：元素不可见，霸占页面空间，无法相应点击事宜
opacity:0opacity属性表示元素的透明度，将元素的透明度设置为0后，在我们用户眼中，元素也是隐蔽的
opacity: N 和 filter: opacity(N) 属性可以通报一个 0 到 1 之间的数字，或者 0% 和 100% 之间的百分比，对应地表示完备透明和完备不透明。
opacity: N：该属性用来设置元素的透明度；filter: opacity(N) ：filter属性用来设置元素的滤镜，opacity是滤镜重的透明度，用来设置元素的透明度。不会引发重排，一样平常情形下也会引发重绘
如果利用 animation 动画，对 opacity 做变革（animation会默认触发GPU加速），则只会触发 GPU 层面的 composite，不会触发重绘
.transparent { opacity:0;}
由于其仍旧是存在于页面上的，以是他自身的的事宜仍旧是可以触发的，但被他遮挡的元素是不能触发其事宜的
须要把稳的是：其子元素不能设置opacity来达到显示的效果
特点：改变元素透明度，元素不可见，霸占页面空间，可以相应点击事宜
在当代浏览器中，这两者之间险些没有实际的差异，但如果同时运用多种效果（模糊、比拟度、灰度等）时，该当利用 filter 属性。
把稳：opacity 可以设置动画并供应出色的性能，但页面上保留完备透明的元素可能会触发事宜。
设置height、width属性为0
将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还该当设置其overflow:hidden来隐蔽其子元素
.hiddenBox { margin:0; border:0; padding:0; height:0; width:0; overflow:hidden;}
特点：元素不可见，不霸占页面空间，无法相应点击事宜
position:absolute将元素移出可视区域
.hide { position: absolute; top: -9999px; left: -9999px;}
特点：元素不可见，不影响页面布局
clip-path通过裁剪的形式
.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);}
特点：元素不可见，霸占页面空间，无法相应点击事宜
小结最常用的还是display:none和visibility:hidden，其他的办法只能认为是奇招，它们的真正用场并不是用于隐蔽元素，以是并不推举利用它们
差异关于display: none、visibility: hidden、opacity: 0的差异，如下表所示：
display: none
visibility: hidden
opacity: 0
页面中
不存在
存在
存在
重排
会
不会
不会
重绘
会
会
不一定
自身绑定事宜
不触发
不触发
可触发
transition
不支持
支持
支持
子元素可复原
不能
能
不能
被遮挡的元素可触发事宜
能
能
不能
代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> CSS 几种隐蔽元素的方法(噜苏知识点整理) </title></head><style>.w_vis-hid-outer { background-color: steelblue; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 42px;}.w_vis-hid-outer p { line-height: 62px; padding: 0 24px;}.w_l-con { background-color: tomato;}.w_r-con { background-color: yellowgreen;}/ visibility: hidden 设置隐蔽 /.w_now-vis { background-color: brown; margin: 0 12px; / visibility: hidden; /}.w_opac-hid-outer { background-color: slategray; display: flex; justify-content: flex-start; align-items: center; padding: 0 12px; margin-bottom: 42px;}.w_opac-hid-outer p { line-height: 62px; padding: 0 24px;}.w_l-opa-con { background-color: snow;}.w_r-opa-con { background-color: tan;}/ opacity: 0 设置隐蔽 /.w_now-opac { background-color: skyblue; margin: 0 12px; / opacity: 0; /}.w_posi-hid-outer { background-color: slategray; display: flex; justify-content: flex-start; align-items: center; padding: 0 12px; margin-bottom: 42px;}.w_posi-hid-outer p { line-height: 62px; padding: 0 24px;}.w_l-pos-con { background-color: snow; margin-right: 12px;}.w_r-pos-con { background-color: tan; margin-left: 12px;}/ opacity: 0 设置隐蔽 /.w_now-posi { background-color: skyblue; / position: absolute; / / left: -6666px; /}.w_disp-hid-outer { background-color: red; display: flex; justify-content: flex-start; align-items: center; padding: 0 12px; margin-bottom: 42px;}.w_disp-hid-outer p { line-height: 62px; padding: 0 24px;}.w_l-dis-con { background-color: #ccc; margin-right: 12px;}.w_r-dis-con { background-color: #212121; margin-left: 12px; color: #FFF;}/ display: none 设置隐蔽 /.w_now-disp { background-color: blueviolet; / display: none; /}.w_trans-hid-outer { background-color: darkorange; display: flex; justify-content: flex-start; align-items: center; padding: 0 12px; margin-bottom: 42px;}.w_trans-hid-outer p { line-height: 62px; padding: 0 24px;}.w_l-tran-con { background-color: #ccc; margin-right: 12px;}.w_r-tran-con { background-color: #212121; margin-left: 12px; color: #FFF;}/ transform: scale(0) 设置隐蔽 /.w_now-trans { background-color: blueviolet; / transform: scale(0); /}.w_hidd-hid-outer { background-color: darksalmon; display: flex; justify-content: flex-start; align-items: center; padding: 0 12px; margin-bottom: 42px;}.w_hidd-hid-outer p { line-height: 62px; padding: 0 24px;}.w_l-hid-con { background-color: steelblue; margin-right: 12px;}.w_r-hid-con { background-color: #212121; margin-left: 12px; color: #FFF;}/ hidden attribute 设置隐蔽 (在 html 元素标签上设置) /.w_now-hidd { background-color: red;}</style><body> <div class="w_hide-shel"> <!-- visibility: hidden 方法 --> <div class="w_vis-hid-outer"> <p class="w_l-con">左侧元素 -- 方法 1: visibility: hidden</p> <p class="w_now-vis">中间 隐蔽 元素</p> <p class="w_r-con">右侧元素 -- 方法 1: visibility: hidden</p> </div> <!-- opacity: 0 方法--> <div class="w_opac-hid-outer"> <p class="w_l-opa-con">左侧元素 -- 方法 2: opacity: 0</p> <p class="w_now-opac">中间 隐蔽 元素</p> <p class="w_r-opa-con">右侧元素 -- 方法 2: opacity: 0</p> </div> <!-- position: absolute 方法 --> <div class="w_posi-hid-outer"> <p class="w_l-pos-con">左侧元素 -- 方法 3: position: absolute</p> <p class="w_now-posi">中间 隐蔽 元素</p> <p class="w_r-pos-con">右侧元素 -- 方法 3: position: absolute</p> </div> <!-- display: none --> <div class="w_disp-hid-outer"> <p class="w_l-dis-con">左侧元素 -- 方法 4: display: none</p> <p class="w_now-disp">中间 隐蔽 元素</p> <p class="w_r-dis-con">右侧元素 -- 方法 4: display: none</p> </div> <!-- transform: scale(0) --> <div class="w_trans-hid-outer"> <p class="w_l-tran-con">左侧元素 -- 方法 5: display: none</p> <p class="w_now-trans">中间 隐蔽 元素</p> <p class="w_r-tran-con">右侧元素 -- 方法 5: display: none</p> </div> <!-- hidden attribute --> <div class="w_hidd-hid-outer"> <p class="w_l-hid-con">左侧元素 -- 方法 6: hidden attribute</p> <p class="w_now-hidd">中间 隐蔽 元素</p> <!-- <p class="w_now-hidd" hidden="true">中间 隐蔽 元素</p> --> <p class="w_r-hid-con">右侧元素 -- 方法 6: hidden attribute</p> </div> </div></body></html>
给大家分享我网络整理的各种学习资料，前端小白交学习流程，入门教程等回答-下面是学习资料参考。
前端学习互换、自学、学习资料等推举 - 知乎
