How to implement CSS Control div layer display and hide

This article brings you the CSS control P-layer display and hidden methods, is the front-end learning must master the basic knowledge, very good, with reference value, interested in small partners to learn it

Display and visibility properties in CSS

The CSS display and visibility can hide and display HTML elements including the P-layer. It looks like they're very similar, and a lot of people get confused. The properties of both are described below:

Display:none|block;

Display:none;

Hiding the HTML element, to be exact, is to eliminate the element in the browser and not occupy the space of the screen. If there are other elements, it will move up to the space area (as if there were 100 dollars on the table, and now I hide it in a drawer, where 100 of the money on the table can be placed on everything else).

Dispaly:block;

Displays the HTML element that has been hidden, and if other elements occupy the space, he moves down and the space is re-occupied by the original element. (Put 100 dollars back out of the drawer and put it back on the table).

visibility:hidden|visible;

Visibility:hidden;

Hides the element, is really hidden, but he also occupies the space. At this time, (there are 100 dollars on the table, this is I covered the tablecloth to hide him, the money is still there).

visibility:visible;

Let the elements show (take off the tablecloth and see 100 dollars).

So the display and visibility control is whether the HTML element exists and whether it is displayed, the property of display defines the element exists or does not exist, and the visibility property only controls whether the element is displayed, actually exists.

Next use the code to give an example, code:

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!