CSS隐藏元素的各种方法比较
说到CSS隐藏元素，我认为大多数人会想到的第一种方式是设置显示为一个都不存在，这是最熟悉和最常用的方法。这种方法也是一种常见的方法，很多人都知道它们之间的区别，除了这两种方法外，本文还总结了一些比较常用的方法，比较了这些隐藏和元素法的区别和优缺点。欢迎大家！几种方法简介
首先，我们谈论的是隐藏元素的方法，有些是众所周知的，有些是技巧。
显示：无
设置元素的显示不是最常用的隐藏元素。
CSS代码将内容复制到剪贴板。
{。隐藏
显示：无；
}
当元素被设置为显示时：没有，元素将完全消失在页面上。由元素所占用的空间会被其他元素所占据，也就是说，它会导致浏览器重排和重绘。
可见性：隐藏
将元素的可见性设置为隐藏也是隐藏元素的常用方法。之间的差异显示：没有和其他元素，所占用的空间仍然会在页面元素的消失，依然存在，所以它只会导致浏览器重画而不是重排。
CSS代码将内容复制到剪贴板。
隐藏{。
可见性：隐藏
}
可见性：隐藏适合于不希望页面布局在元素隐藏之后更改的场景。
不透明度：0
不透明属性，我相信大家都知道元素的透明度，元素的透明度设置为0。在我们用户的眼中，元素也是隐藏的，这是隐藏元素的一种方式。
CSS代码将内容复制到剪贴板。
{。透明
不透明性：0；
}
这种方法和可见性的一个共同特点是隐藏，元素隐藏后占用空间。但我们都知道，在设置透明度为0之后，元素是不可见的，并且它仍然存在于页面中。
将高度、宽度相等的框模型属性设置为0
这是一个奇妙的技巧总结，简单说，边缘，边界，填充高度和宽度的元素，元素的属性影响箱模式设置为0，如果在子元素或内容的元素，还应该设置溢出：隐藏隐藏的子元素，这是一个邪恶的诡计邪恶的工艺。
CSS代码将内容复制到剪贴板。
{。hiddenbox
保证金：0；
边界：0；
填充：0；
身高：0；
宽度：0；
溢出：隐藏；
}
这种方式既不现实也不可能，可能会有一些问题，但我们通常使用一些网页可能采用这种方式来完成，比如jquery向上方滑出的动画，它是集溢出：隐藏元素，然后通过定时器，继续设置元素的高度，缘缘顶部，底部，顶部底部边界，边界，填充，填充底0，从而达到slideup效果。
隐藏元素后的事件响应
如果隐藏元素绑定到某些事件，那么在执行相关操作之后，这些事件会被响应和执行吗请看下面的代码：
CSS代码将内容复制到剪贴板。
{ div
宽度：100px；
身高：100px；
背景：红色；
保证金：15px；
填料：10px；
边境：5px固体绿；
显示：内联块；
溢出：隐藏；
}
无{显示：无；}
隐藏{可见性：隐藏；}
.opacity0 {opacity: 0;}
。height0 {高度：0；}
AA
$（。）。
console.log（没有了）；
}）
$（隐藏）。
console.log（隐藏点击）；
}）
$（。opacity0 ），（单击
console.log（opacity0点击）；
}）
$（。height0 ），（单击
console.log（height0点击）；
}）
此代码显示四个隐藏元素的方法，然后绑定它们的单击事件。经过测试，主要结论如下：
1，显示：无：元素完全消失，很明显它不会触发它的点击事件。
2，可见性：隐藏：无法触发单击事件，有一个显示：没有元素是不可见的，而可见性：隐藏是看不见的触摸，这个语句不准确，触发事件设置元素可见性，这个方法元素也消失了，但仍然占据页面空间。
3，不透明：0：触发事件可以触发。原因也很简单。在将元素的透明度设置为0之后，元素只与人眼相对。它仍然存在于浏览器中，因此可以触发单击事件。
4、高度：0：设置元素的高度为0，并设置溢出：hidden.this方法用于隐藏元素，以及是否可以触发事件的具体情况进行分析。如果元素设置边界，填充和其他属性是不是0，很明显，你可以看到这个元素在页面上，并触发元素的单击事件是没有问题的。如果所有的属性都设置为0，很明显，元素正在消失，即单击事件无法触发。
但是这些结论真的准确吗
我们在上面的代码中添加了这个代码：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
Click（）；
结果发现，单击事件被触发，也就是说，js可以触发的事件被设置为显示元素：无。
所以，为什么不能触发前面的点击事件是因为鼠标不能真正接触隐藏元素！！！！
CSS3过渡对这些方法的影响
通过CSS3过渡大大提高了网络动画的创作，但不是每一个CSS属性可以通过过渡动画。我们修改的代码如下：
CSS代码将内容复制到剪贴板。
{ div
宽度：100px；
身高：100px；
背景：红色；
保证金：15px；
填料：10px；
边境：5px固体绿；
显示：内联块；
溢出：隐藏；
转换：所有线性2S；
}
AA
$（。）。
console.log（没有了）；
$（这个）。Css（）
}）
$（隐藏）。
console.log（隐藏点击）；
$（this）Css（可见性
}）
$（。opacity0 ），（单击
console.log（opacity0点击）；
$（这个）Css（不透明）
}）
$（。height0 ），（单击
console.log（height0点击）；
美元（这个）。Css（{
高度：0，
}）；
}）
测试之后，你可以看到：
1、显示：无：元素在不受转换属性影响的情况下立即消失。
2，可见性：隐藏：元素消失的时间与转换属性设置的时间相同，但没有动画效果。
3、透明度和高度属性可以执行正常的动画效果。
假设我们要使用CSS3来做一个褪了色的动画效果，应如下：
CSS代码将内容复制到剪贴板。
淡出{能见度：可见；不透明度：1；过渡：所有线性2s；}
FadeOut：悬停{可见性：隐藏；不透明度：0；}
元素的可见性和不透明属性应该同时设置。
本文总结了隐瞒元素的几种方法，最常用的是显示：没有和能见度：hidden.the其他方式不推荐使用这些奇技淫巧，隐藏要素，其真正的目的应该是隐藏要素，但通过了解这些方法的特点，找出真实的场景。欢迎大家交流！
来自合伙人的提示：
1。设置元素的位置和左、顶、底、右等，并将元素从屏幕上移除。
2、设置元素的位置和属性，并设置z-index尽可能小
以上是本文的全部内容，希望能对大家有所帮助。