最全11种方法 css隐藏页面元素 思路不一样，不一定要隐藏(通过css让a标签失效的方法)
文章目录
最全11种方法 css隐藏页面元素 思路不一样，不一定要隐藏
前言
在CSS中很多隐藏元素的方法，但这些方法的可访问性、布局、动画、性能和事件处理的方式有所不同。
- “动画：” 一些CSS隐藏元素的方法一般是全有或者全无，元素要么是完全可见，要么是完全不可见，并且没有中间状态。其他的，比如透明度，可以是一个范围的值，所以在这中间过程插入动画成为可能；
- “可访问性：” 下面的每一种方法都会在视觉上隐藏一个元素，但不一样会真正的去除DOM元素。有一些方式隐藏元素后，屏幕阅读器仍然能读取到元素内容；
- “事件处理：” 隐藏元素之后，有些方式元素上的事件仍然能被触发，而有些方式就会导致元素上的事件触发无效；
- “表现：” 浏览器加载并解析 HTML DOM 和 CSS 对象模型后，页面将分三个阶段呈现：布局（生成每个元素的几何位置）、绘制（绘制每个元素的像素）、组合（以适当的顺序放置元素层）。仅导致构图变化的效果明显比影响布局的效果更好。在某些情况下，浏览器还可以使用硬件加速。
实现方式
通过css实现隐藏元素方法有如下：
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。
transform
transform 属性可以用于元素的平移、缩放、旋转或倾斜等。可以使用 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也是一种常用的隐藏元素的方法
从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘
.hidden{
visibility:hidden
}
给人的效果是隐藏了，所以他自身的事件不会触发
特点：元素不可见，占据页面空间，无法响应点击事件
opacity:0
opacity属性表示元素的透明度，将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的
opacity: N 和 filter: opacity(N) 属性可以传递一个 0 到 1 之间的数字，或者 0% 和 100% 之间的百分比，对应地表示完全透明和完全不透明。
- opacity: N：该属性用来设置元素的透明度；
- filter: opacity(N) ：filter属性用来设置元素的滤镜，opacity是滤镜重的透明度，用来设置元素的透明度。
不会引发重排，一般情况下也会引发重绘
.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>
给大家分享我收集整理的各种学习资料，前端小白交学习流程，入门教程等回答-下面是学习资料参考。
前端学习交流、自学、学习资料等推荐 - 知乎
通过css让a标签失效的方法
wordpress网站文章上传的图片，常常默认带有图片的链接，点击就直接到图片页面。
我们可以通过wordpress主题，主题函数function.php 设置上传不带链接，但是之前发布的内容却无法更改。
这样我们可以通过css来控制：
|
1 2 3 4 5 |
.ngg-gallery-slideshow-imagea{ pointer-events:none; color:#afafaf; cursor:default; } |
只需要对a标签加上标签就可以，实现链接失效。
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 最全11种方法 css隐藏页面元素 思路不一样，不一定要隐藏(通过css让a标签失效的方法)
