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 tovisibility:visibleYou 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