About the specified element can not be seen within the field of view, there are three methods
display: none;
opacity: 0;
visibility: hidden;
1.display: none; This method will change the page layout.
- Element completely disappeared from the document flow.
- Child element follows the parent element is hidden and can not be displayed separately.
- Event bindings can not be triggered.
- In any case, DOM node still exists, it can still operate with js.
2.opacity: 0; This method does not change the page layout.
- It is actually an element of transparency is 0.
- Child element opacity: 1 is not valid, the elements still can not be displayed.
- Event bindings can still trigger.
3.visibility: hidden; the method does not change the layout of the page.
- The elements are not visible.
- Child elements set visibility: visible; later, the child element will be displayed, but the parent element will not be displayed.
- Event binding can not be triggered.
4.height: 0 and overflow: hidden combination of
overflow: hidden understanding with the Chinese is "hidden overflow" that is something other than a click away box are not visible. Plus height: 0, as long as the general non-inline level elements, the internal elements of all the descendants should not be visible.
height: 0 and overflow: hidden combination hidden "failure" of the following conditions: no ancestor element position: relative / absolute / fixed statement, while internal sub-elements applied position: absolute / fixed Statement
5.overflow and text-overflo difference
text-overflow: clip / ellipsis; things when a predetermined attribute text element comprising an overflow occurs.
overflow: hidden; hide all of the content more than the set width visible outside the box.