What is the difference between display and visibility

This article mainly introduces the relevant knowledge of "what is the difference between display and visibility". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the difference between display and visibility" can help you solve the problem.

Some people simply think that display: none; and visibility: hidden

The difference between these two properties is that the former is hidden and does not occupy document space.

The latter takes up document space when hidden.

Actually, visibility: hidden is not as simple as you think.

Visibility is an attribute that you underestimate.

We all know that visibility: hidden; is inherited.

If the parent element has visibility: hidden set

Then the subset elements will not be visible.

But if the subset element sets visibility: visible

The child element will be displayed again.

This is fundamentally different from display:none.

You can't see me.

You can't see me.

You can't see me.

You can't see me.

Ul {

Visibility: hidden

Background: pink

}

. second-li {

Visibility: visible

}

We found that although the outermost ul is visibility: hidden

But its child element sets visibility: visible

Then the child element will be displayed.

This is the end of the content about "what's the difference between display and visibility". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.