css中元素的显示与隐藏

ゝ一世哀愁。 2022-10-24 15:23 174阅读 0赞

**1.display属性  
display:none；【隐藏元素】**  
未加display属性时：  
代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div1 {
        
                width: 200px;
                height: 200px;
                background-color: pink;
            }
            .div2 {
        
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="div1">xxx</div>
        <div class="div2">xxx</div>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
加了display:none；属性后：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div1 {
        
                width: 200px;
                height: 200px;
                background-color: pink;
                display: none;
            }
            .div2 {
        
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="div1">xxx</div>
        <div class="div2">xxx</div>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
把display:none；改成display:block后：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div1 {
        
                width: 200px;
                height: 200px;
                background-color: pink;
                display: block;
            }
            .div2 {
        
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="div1">xxx</div>
        <div class="div2">xxx</div>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
**2.visibility属性  
visibility:hidden;【元素隐藏】  
visibility:visible【元素显示】**  
当我们给元素添加 visibility:hidden;  
代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div1 {
        
                width: 200px;
                height: 200px;
                background-color: pink;
                visibility: hidden;
            }
            .div2 {
        
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="div1">xxx</div>
        <div class="div2">xxx</div>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]  
我们把display:hidden 改成 display:visible;  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div1 {
        
                width: 200px;
                height: 200px;
                background-color: pink;
                visibility: visible;
            }
            .div2 {
        
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="div1">xxx</div>
        <div class="div2">xxx</div>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]  
**3.overflow溢出  
visible:元素完全显示  
hidden:元素超出的部分剪切掉  
scroll:元素所在盒子会一直有滚动条  
auto:根据元素内容来确定是否需要滚动条**  
先来看看overflow:vivible;

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div {
        
                width: 100px;
                height: 100px;
                border:1px solid black;
                margin:100px auto;
                overflow: visible;
            }
        </style>
    </head>
    <body>
        <div class="div">为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</div>
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]  
接下来看overflow:hidden;属性：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div {
        
                width: 100px;
                height: 100px;
                border:1px solid black;
                margin:100px auto;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="div">为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</div>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 6]  
接下来看overflow:scroll;

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div {
        
                width: 100px;
                height: 100px;
                border:1px solid black;
                margin:100px auto;
                overflow: scroll;
            }
        </style>
    </head>
    <body>
        <div class="div">为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</div>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 7]  
**文字很少的情况滚动条会不会在呢？**

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 8]  
最后看overflow:auto；

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 9]  
文字多时：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div {
        
                width: 100px;
                height: 100px;
                border:1px solid black;
                margin:100px auto;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="div">为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！为中华之崛起而读书！</div>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 10]

总结：  
元素的显示与隐藏总共有三种属性：

1.  display
2.  visibility
3.  overflow  
    注意display:none;元素隐藏位置不占用  
    而  
    visibility:hidden；元素隐藏位置仍占用着

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/1443495d646140a191a72b780d27f946.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/873f2ee7a8014e378bd88992eadcf9d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/d5aff7811893431f94d719660f4701f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221024/41b7e4700bc0431288a05409b2d816e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]: /images/20221024/c41ff01e8c8e4ba4afd9f5dab52aeefe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]: /images/20221024/0254042b1706423d95ce1a307f6ced9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 6]: /images/20221024/a7788726811347a8ab9b4db06cecc810.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 7]: /images/20221024/f5827aa2345849eab6636f68c3078bad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 8]: /images/20221024/e3f48d55506c4961a2b78bdfe9c9c9e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 9]: /images/20221024/2760baf1330a4770a90bdc342eaafe6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 10]: /images/20221024/958aca13d89846c7b279814b2fdeea85.png