隐藏一个元素的三种方式附加他们的区别

在HTML中隐藏一个元素主要分为三种方式，分别为

display:none; 这个属性用于定义建立布局时元素生成的显示框类型,而none属性可以让元素隐藏

visibility:hidden；这个属性是能见度的意思，使用hidden属性值后可以让元素“隐藏”

opacity:0; 这个属性是透明度的意思，为零即透明度为0，也可以做到隐藏元素的作用

虽然上面三个属性都可以让元素实现“隐藏”的效果但是有的是真的让元素隐藏起来了，但有的只是假的让元素元素“隐藏”起来了，
display:none; 可以直接让元素“消失”而且在页面中不会占元素隐藏前该占的位置

visibility:hidden；和 opacity:0; 虽然也能让元素实现“隐藏”效果，但是他们让元素隐藏后在页面上该占的位置是不会变的，

打个比喻display可以做到让一个元素真真正正的消失，不管他之前占了什么位置有多大，而另外两个更像是让元素隐身起来了，该有的属性是一点不变，只是看不见而已，

那么他们都能用于什么场景呢，比如你想在一个元素上面做一个按钮，让点击这个元素的时候实现按钮一样的效果，但是这个按钮很丑，而且影响客户视觉效果，这时候就可以使用opacity，visibility两个属性了，这样虽然按钮是隐藏的但是功能并不会消失