css三种隐藏的区别

CSS有三种方式可以隐藏元素，分别为display:none、visibility:hidden和opacity:0。它们虽然都可以实现隐藏，但实际上有些微妙的差别。

//display:none

display:none是最常用的一种隐藏方式，可以将元素完全移除，使得它在文档流中不再占有任何空间。

例如：

.box {
    display: none;
}

这样box这个元素就会被完全移除，不能通过DOM操作访问，也不会影响其他元素的排列和布局。

//visibility:hidden

visibility:hidden也是将元素隐藏起来，但与display:none不同，它仍然在DOM树中占有空间，只是不可见而已。

例如：

.box {
    visibility: hidden;
}

这样box这个元素仍然在页面上存在，只是看不见了，但它所占用的空间并没有被释放，仍然会影响其他元素的排列和布局。

//opacity:0

opacity:0和visibility:hidden类似，也是将元素隐藏起来，但是不同的是，它仍然占有空间，但是将它自身设置为透明。

例如：

.box {
    opacity: 0;
}

这样box这个元素仍然在页面上占用空间，相当于visibility:hidden，但是它的不可见不是通过display:none或visibility:hidden来实现的，而是通过将自己变为透明来实现的。需要注意的是，当元素透明时，它仍然可以通过DOM操作来访问。

总结来说，虽然三种方式都可以将元素隐藏，但用到的场景可能不尽相同。需要考虑在页面布局中占用空间、在JS脚本中的可能调用、在SEO上的优化等因素，再选择合适的方式去隐藏元素。