display和visibility的区别

6

国瑞前端: visibility:hidden 表示的是该元素隐藏了,但是该元素依然占位,相当于“停职留薪”,display:none表示的就是该元素被彻底的隐藏了,也不会占位,代…

国瑞前端: visibility:hidden 表示的是该元素隐藏了,但是该元素依然占位,相当于“停职留薪”,display:none表示的就是该元素被彻底的隐藏了,也不会占位,代码如下:

visibility:hidden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        img{
            border:0;
        }
        ol, ul ,li{list-style: none;}
        div
  {
    width: 100px;
    height: 100px;
    /* 默认的 */
   /* visibility:visible; */
visibility:hidden;
  background: red;
  }
    </style>
</head>
<body>
    <div>

    </div>
    <span>这里的是下面的文字</span>
</body>
</html>

display:none

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        img{
            border:0;
        }
        ol, ul ,li{list-style: none;}
        div
  {
    width: 100px;
    height: 100px;
    display: none;
    background: red;
  }
    </style>
</head>
<body>
    <div>

    </div>
    <span>这里的是下面的文字</span>
</body>
</html>

作者: huanggr

为您推荐

7

发表评论

电子邮件地址不会被公开。 必填项已用*标注