The difference between display: none, visibility: hidden and opacity: 0

Whether to leave the document flow

  • display: none: Make the element out of the document flow, do not occupy the original space, will cause the rearrangement of the page
  • visibility: hidden: will not leave the document flow, the element is still in its original position if it is not visible
  • opacity:0:同 visibility:hidden

 

inherit

  • display: none: The child element still has the display attribute, hidden with the parent element
  • visibility: hidden: The child element is set to visibility: visible, which can be displayed separately
  • opacity:0:同 display:none

 

event

  • display: none: unable to add event
  • visibility: hidden: unable to add event
  • opacity: 0: events can be added

 

 


[Java interview questions and answers] sorting recommendations

 

Published 562 original articles · praised 1543 · 1.65 million views +

Guess you like

Origin blog.csdn.net/meism5/article/details/105421487