How to implement CSS to control the display and hiding of DIV layers-CSS Tutorial-php.cn

How to implement CSS to control the display and hiding of DIV layers

不言

Release： 2018-06-14 17:10:58

Original

2993 people have browsed it

This article brings you the method of controlling the display and hiding of the p layer with CSS. It is the basic knowledge that must be mastered in front-end learning. It is very good and has reference value. Interested friends should learn together

The display and visibility attributes in CSS

The display and visibility properties in CSS can hide and show html elements including the p layer. The two look very similar and many people get them confused. The properties of the two are introduced below:

display:none|block;

display:none;

Hide the html element, to be precise , to eliminate the element in the browser without taking up screen space. If there are other elements under it, it will move up to that space area (for example, there is 100 dollars on the table, and now I put it in a drawer to hide it, and the place where the 100 dollars is placed on the table can be placed on anything else).

dispaly:block;

Display the hidden html element. If another element occupies the space, it will move down and the space will be reset to the original element. Possession. (Take the 100 yuan out of the drawer and put it back on the table).

visibility:hidden|visible;

visibility:hidden;

Hide the element, it is really hidden, but it still occupies that space . At this time, (there was 100 yuan on the table. I covered it with a tablecloth to hide it, but the money was still there).

visibility:visible;

Let the element display (remove the tablecloth and see 100 yuan).

So display and visibility control whether the html element exists and whether it is displayed respectively. The display attribute defines whether the element exists or not, while the visibility attribute only controls whether the element is displayed. In fact, it still exists. .

Let’s use code as an example. Code:

<html>   
<head>   
<script type="text/javascript">   
function testDisplay()   
{   
    var pD = document.getElementById("testD");   
    if(pD.style.display=="none")   
    {   
        pD.style.display = "block";   
    }   
    else   
    {   
        pD.style.display = "none";   
    }   
}   
function testVisibility()   
{   
    var pV = document.getElementById("testV");   
    if(pV.style.visibility =="hidden")   
    {   
        pV.style.visibility ="visible";   
    }   
    else   
    {   
        pV.style.visibility = "hidden";   
    }   
}   
</script>   
</head>   
</body>   
<p id="testD" style="border:#ddd 1px solid">   
    <p style="display:block;border:#ccc 2px solid">   
        <p style="visibility:visible;border:#aaa 2px solid">   
        Display   
        </p>   
    </p>   
</p>   
<p id="testV" style="border:#ddd 1px solid">   
    <p style="display:block;border:#ccc 2px solid">   
        <p style="visibility:visible;border:#aaa 2px solid">   
        Visibility   
        </p>   
    </p>   
</p>   
<input type="button" value="TestDisplay" onclick="testDisplay()"/>   
<input type="button" value="TestVisibility" onclick="testVisibility()"/>   
</body>   
</html>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. More related content Please pay attention to PHP Chinese website!

Related recommendations:

About css flex Flexible layout

Parsing of CSS3 default pseudo-class selector

The above is the detailed content of How to implement CSS to control the display and hiding of DIV layers. For more information, please follow other related articles on the PHP Chinese website!