Four methods:
1.display: none;
2.overflow: hidden;
3.visibility: hidden;
4.opacity: 0;
1.display: none;
characteristic:
(1) Connectivity
(2) Does not take up space
(3) If it is set for whom, the position originally occupied by that person will not exist (equivalent to being deleted directly), and its children will also disappear.
The browser directly does not parse all elements of this element, including its child elements.
(4) After setting display:none; to an element, even if a hover state is added to the element, or display: block; is added to the child element of the element, the content cannot be reproduced.
initial content
Add display:none; in the parent
The position originally occupied by the parent does not exist (equivalent to being deleted directly), and its children also disappear
Does not take up space
Adding a hover state to the element, or adding display: block to the child element of the element; also cannot achieve content reproduction
2.overflow: hidden;
characteristic:
(1) The excess part is hidden
(2) It still takes up space and disappears visually, but it still occupies space in the document flow, which is equivalent to setting the transparency to 0, and the browser still parses the element
(3) Use overflow: scroll; the scroll wheel shows the excess
initial content
Parent add overflow: hidden;
Effect
Use overflow: scroll; the scroll wheel shows the excess
Effect
3.visibility: hidden;
characteristic:
(1) Still occupying space
(2) Directly hide (you can set visibility: visible for child elements; only child elements are displayed)
Still taking place
Visibility: visible can be set on child elements; only child elements are displayed
4.opacity: 0;
characteristic:
(1) Hide the element and set the transparency level to 0, but it does not affect the layout
(2) Still occupying space
(3) For example, if the element is bound to some events, clicking on this area can still trigger the bound event (click)
(4) An element is set with opacity: 0; then set a hover state for the element, (opacity: 1;) can reproduce its content
placeholder
Set a hover state to the element, (opacity: 1;) to reproduce its content
When the mouse is placed in the parent area, its content will be reproduced
