The difference between display: none and visibility: hidden hiding is displayvisibility.

The difference between display: none and visibility: hidden hiding is displayvisibility.

Today, I encountered a small problem when completing the design. I made a tab navigation bar and clicked a tab page to hide other tabs. At this time, the first idea was to use display: none to control display hiding, after writing it, we find that there is a problem with the use of display, that is, the carousel image of the second tab page obtains the width of an element in the second tab page during page rendering for adaptive effect, because the image is hidden and the width is 0, the height of the carousel image is also 0. Then, change display: none to visibility: hidden to display and play normally.

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

1. display: none completely disappears and does not occupy space in the Document Stream. the browser does not parse this element. visibility: hidden disappears visually and can be understood as a result with a transparency of 0, occupies a space in the document stream, and the browser will parse the element;

2. visibility: hidden has better performance than display: none. visibility occurs when display: none is switched to display. Page backflow occurs (when some elements on the page need to change the size, layout, display hiding, and so on, page re-build, this is the back flow. All pages need to generate a backflow when they are loaded for the first time), but does not cause reflux when visibility is switched to display or not.

So I use visibility: hidden. When rendering the page, the carousel image on the second tab page can be used to obtain the adaptive width.