在CSS中，opacity：0和display：none之间有什么区别？
我正在使用jQuery fadeIn / fadeOut方法，并且确切地知道它在做什么。 文档声明该方法影响元素的不透明度属性，但显示：none也可以隐藏元素然后将其淡入。是不透明度：0和显示：无同样的事情？ 我看到使用这些方法的一些非常不稳定的动画，并希望了解更好的事情。
display: none让元素消失。 就像它不存在一样。 这意味着您的布局可能会更改。
opacity: 0这个只会使你的元素不可见。 它不会对您的布局产生任何影响。
两种情况都使元素不可见，但属性不同 ：
-
opacity: 0： 不可见 ，但占用显示空间 （影响布局），并且可单击 -
display: none： 不可见 ， 不占用显示空间 ，因此不可点击
让我在这个背景下添加第三个相关的：
-
visibility: hidden： 不可见 ， 占用显示空间 ， 不可点击
我在这里制作了一个演示JSFiddle： http ： //jsfiddle.net/sebastien_worms/tCbJD/
opacity:0仍将允许元素上的单击，hover和其他鼠标事件。 它只是不会被用户看到。
display:none执行它所暗示的内容 – 元素仍然存在但完全不可见，就像它的width和height为0一样。
display: none就像是从页面中删除了一个对象， opacity: 0或visibility: none都将对象保留在页面上，但只是让所有内容都清晰，并留下一个空白的空间。 当它的不透明度：0你仍然可以点击它，但我不认为可见性相同：无。
它们都会使文本不可见，但display: none; 会让它看起来像从未存在过，其中opacity:0.0; filter:alpha(opacity=0); opacity:0.0; filter:alpha(opacity=0); 会让它看起来像是缺少一些东西。
例如。
display: none;
This is text This is more text
将显示为
这是文字
这是更多的文字
opacity:0.0; filter:alpha(opacity=0);
This is text This test is invisible This is more text
将显示为
这是文字
这是更多的文字
合理？
不透明度会影响对象的透明度。
显示会影响对象在Web浏览器中的呈现方式。
例如：
This text is here! This text will be invisible this text will be here
这（看着它的用户）会让它看起来像“这个文字在这里！” 并且“这个文本将在这里”在它们之间有一个换行符。
这个例子：
This text is here! this text will be here
这（对用户）将使两条可见线看起来直接在彼此之上，两者之间没有空间。
在JQuery中，淡入或淡出会将显示从“无”更改为“阻止”，而对于另一个则分别反之。 它还将在规定的时间内平滑地将不透明度从0变为1，对另一个则反之亦然。
除了@ arminb的答案（我不能只评论它）显示：none将在所有（模糊的现代）浏览器中工作，不透明度：0在旧浏览器中具有不稳定的支持（在IE6,7或8中不起作用）
如果你确实需要Opacity，那么这样的东西应该适用于所有：
.opaque { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; }
但那太乱了。 display:none是最干净的解决方案。 visibility:hidden也可以在比不透明度更多的浏览器中工作，并达到相同的目的（即使其不可见，但将其留在那里）