在CSS中,opacity:0和display:none之间有什么区别？

Question

我正在使用jQuery fadeIn/fadeOut方法,并且确切地知道它在做什么.文档声明该方法影响元素的不透明度属性,但显示:none也可以隐藏元素然后淡入它.是不透明度:0和显示:无同样的事情？我看到使用这些方法的一些非常不稳定的动画,并希望了解更好的事情.

Answer 1

display: none让元素消失.就像它不存在一样.这意味着您的布局可能会改变.

opacity: 0这个只是让你的元素不可见.它不会对您的布局产生任何影响.

Answer 2

两种情况都使元素不可见,但属性不同:

• opacity: 0:不可见,但占用显示空间(影响布局),可点击
• display: none:不可见,不占用显示空间,因此不可点击

让我在这个背景下添加第三个相关的:

• visibility: hidden:不可见,占用显示空间,而不是可点击

我在这里制作了一个演示JSFiddle:http://jsfiddle.net/sebastien_worms/tCbJD/