编程知识 cdmana.com

CSS notes -- showing and hiding elements

 

display none Non occupying Commonly used
visibility visible/hidden placeholder  
overflow visible/hidden/scroll/auto    

One 、 display

display: none;

display After hidden element , No longer occupy the original position .

Two 、visibility

visible The default value is . Elements are visible .
hidden Elements are invisible .
collapse When used in table elements , This value can delete a row or a column , But it doesn't affect the layout of the table . Space occupied by rows or columns is left for other content to use . If this value is used on other elements , It will appear as "hidden".
inherit  

visibility After hidden element , Continue to occupy the original position .

3、 ... and 、overflow For overflow part

visible The default value is . Content will not be trimmed , It will appear outside the element box .
hidden The content will be trimmed , And the rest is invisible .
scroll The content will be trimmed , But the browser will display scroll bars to see the rest of the content . No more than also show scroll bar
auto If the content is trimmed , The browser will display scroll bars to view the rest of the content . Scroll bar is displayed only after exceeding the limit , No scroll bar will be displayed if it does not exceed
inherit  

    <style>
        .box{
            position: relative;
            width: 444px;
            height: 320px;
        }
        .box .img {
            width: 100%;
            height: 100%;
        }
        .gai {
            position: absolute;
            display: none;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5) url('../img/arr.png') no-repeat center;
        }
        .box:hover .gai {
            display: block;
        }
    </style>

<body>
    <div class="box">
        <img class="img" src="../img/tudou.jpg" alt="">
        <div class="gai"></div>
    </div>
</body>

版权声明
本文为[osc_ 3ytpwpyb]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/11/20201129073546610d.html

Scroll to Top