The visibility attribute in CSS is used to set whether an element is visible. You can use this attribute with JavaScript to create very complex menus or web page layouts. For example, when doing some test questions on a web page, you can use the visibility attribute to change the answers to the questions. Or hide the parsing and display it when needed.
Possible values for the visibility attribute are as follows:
Example:
1.visible
Visible (default) usage
Since the default property value is displayed. So all three little boxes are displayed.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Document</title><style>div{width:100px ;height:100px;}.one{background-color:palegreen;}.two{background-color:palevioletred;}.three{background-color:papayawhip;}</style></head><body><div> </div><div></div><div></div></body></html>Running results:
2.hidden
When we set the first small box not to display (visibility: hidden;), the second small box still occupies its original position.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Document</title><style>div{width:100px ;height:100px;}.one{background-color:palegreen;visibility:hidden;}.two{background-color:palevioletred;}.three{background-color:papayawhip;}</style></head><body ><div></div><div></div><div></div></body></html>Running results:
Note: After visibility hides the element, it continues to occupy its original position.
If the hidden element wants its original position, use visibility:hidden
If the hidden element does not want its original position, use display:none
3.inherit
Example:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Document</title><style>.one,.two ,.three{width:100px;height:100px;}.one{background-color:palegreen;}.two{background-color:palevioletred;}.three{background-color:papayawhip;}.four,.five{width :50px;height:50px;background-color:powderblue;}</style></head><body><div><div></div></div><div><div></div>< /div><div></div></body></html>Running results:
When using the inherit attribute value.
(1) Since the first big green box is set not to be displayed, the small blue box in the first box inherits the hidden attribute of the big box and is not displayed.
(2) The second small blue box inherits the default display attribute visible of the large pink box, so it is displayed.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Document</title><style>.one,.two ,.three{width:100px;height:100px;}.one{background-color:palegreen;visibility:hidden;}.two{background-color:palevioletred;}.three{background-color:papayawhip;}.four, .five{width:50px;height:50px;background-color:powderblue;}</style></head><body><div><div></div></div><div><div>< /div></div><div></div></body></html>Running results:
