What is the difference between using display:none and visibility:hidden?

I encountered a small problem when I was doing my graduation design today. I made a tab navigation bar and clicked on one tab page to hide other tab pages. At this time, the first idea was to use display:none to control the display and hiding. After writing it, I found out There is a problem when using display, that is, the carousel image of the second tab page obtains the width of an element in the second tab page when the page is rendered to make an adaptive effect. Because it has been hidden, the width is 0, so it causes The height of the carousel image is also 0. Later, after changing display:none to visibility:hidden, it can be displayed and played normally.

The difference between display:none and visibility:hidden is:

1.display:none disappears completely, does not occupy a place in the document flow, and the browser will not parse the element; visibility: Hidden disappears visually, which can be understood as the effect of a transparency of 0. It occupies a place in the document flow, and the browser will parse the element;

2. Using visibility:hidden has better performance than display:none. When display:none switches visibility, the page generates a reflow (when some elements in the page need to change the size, layout, display, hiding, etc., the page is rebuilt, which is a reflow. All pages need to generate a reflow when they are loaded for the first time) , and when visibility switches whether to display or not, it will not cause reflow.

So I use visibility:hidden. When the page is rendered, the carousel image in the second tab page can obtain the width and adapt it.

The above is the detailed content of What is the difference between using display:none and visibility:hidden?. For more information, please follow other related articles on the PHP Chinese website!