Display: none does not occupy the original position. Visibility :hidden occupy the original location
Display :none
Definition: Setting display to None removes elements from the accessibility tree. This causes the element and all its descendants to no longer be accessed by screen Reading Technology.
How browsers render: Browsers parse HTML to generate a DOM tree and parse CSS to generate a CSS rendering tree. The DOM tree and Render tree are combined to produce the Render tree, where the browser renders the page with a box model and information layout. Each element has zero or more boxes in the Render Tree. Diaplay: None does not generate boxes, so it can be DOM manipulated but not displayed on the page.
The parent element is display: None. Child elements are also not displayed
You can do DOM manipulation, but you can’t respond to any events
Visibility: Hidden
Definition: the CSS property Visibility displays or hides elements without changing the layout of the document
Hide an element, but the layout of other elements does not change, which is equivalent to making this element transparent. Note that if you set the child element to visibility: visible, the child element will still be visible.
Usage scenarios
- Hide the rows and columns of the table
Hide elements without triggering the layout
Common values
- Visible: display
- Hidden: Not visible, hold position
- Collaose: For table elements
- Inherit: Inherit the visibility value of the parent element
contrast
- The element whose child is set to visibility: hidden is set to
visibility:visible
You can also display - Neither can get focus
- Submission of the form is not impeded
- The effect of transition works for form changes
- Visibility does not trigger reslow backflow. Will only be redrawn
What is the problem with display:inline-block?
When set, elements are formatted as inline elements, and Spaces between elements are handled by the browser. By default, all Spaces are merged, so there are Spaces between elements.
Solution:
- Float: left
- Place the end tag of the previous element next to the start tag of the next element
- Set font size to 0 for the parent element; The child element resets the font size value