CSS样式-显示（完善）

CSS显示：

一、display：none

 

<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>Document</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
        }

        .red {
            background-color: #f00;
            display: none;
        }

        .green {
            background-color: #0f0;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <!-- <div class="green"></div> -->
</body>
</html>
 
==============加了display: none;的效果===============
页面上不再显示红色的div块，
并且鼠标移动到上面看不到：

 

 

 

二、visibility：visible  hidden

 

<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>Document</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
        }

        .red {
            background-color: #f00;
            /* display: none; */
            visibility: hidden;
        }

        .green {
            background-color: #0f0;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <!-- <div class="green"></div> -->
</body>
</html>
 
==============加了visibility: hidden;的效果===============
页面上不再显示红色的div块，
但是鼠标移动到上面可以看到：

 

 

 
display：none和visibility：hidden的区别：
1.display：none把元素从Render tree取下，但是visibility：hidden不会
2.display：none的元素不参与layout（不参与标准流的计算），但是visibility：hidden参与
<!DOCTYPE html>
<html lang="en">
<head>
 
    <title>Document</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
        }

        .red {
            background-color: #f00;
            display: none;
            /* visibility: hidden; */
        }

        .green {
            background-color: #0f0;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
   
    <title>Document</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
        }

        .red {
            background-color: #f00;
            /* display: none; */
            visibility: hidden;
        }

        .green {
            background-color: #0f0;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
</body>
</html>
 

 

 

posted @ 2021-03-21 00:10  #Friday  阅读(45)  评论(0)    收藏  举报