三种方法实现元素的显示与隐藏

本质:让一个元素在页面中隐藏或者显示出来

方法一: display 显示隐藏元素

  • display:none; 隐藏对象
  • display:block; 除了转换为块级元素之外,同时还有显示元素的意思

display 隐藏元素后,存在页面中,但不再占有原来的位置

before:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .xpx {
      
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .gg {
      
            width: 200px;
            height: 200px;
            background: blue;
        }

    style>
head>
<body>
    <div class="xpx">小螃蟹div>
    <div class="gg">哥哥div>
    
body>
html>

三种方法实现元素的显示与隐藏_第1张图片

after:

        .xpx {
            display:none;
            width: 200px;
            height: 200px;
            background-color: pink;
            
        }

        .gg {
            width: 200px;
            height: 200px;
            background: blue;
        }

三种方法实现元素的显示与隐藏_第2张图片

方法二:visibility 显示隐藏元素

  • visibility:visible; 元素可视
  • visibility:hidden; 元素隐藏

visibility隐藏元素后,存在页面中,继续占有原来的位置

after:

    <style>
        .xpx {
      
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: pink;
            
        }

        .gg {
      
            width: 200px;
            height: 200px;
            background: blue;
        }

    style>

三种方法实现元素的显示与隐藏_第3张图片

区别:

如果隐藏元素想要原来位置,就用 visibility:hidden
如果隐藏元素不想要原来位置,就用 display:none

方法三:overflow 溢出显示隐藏

什么是 overflow 溢出?

红色方框部分为溢出:
三种方法实现元素的显示与隐藏_第4张图片

三种方法实现元素的显示与隐藏_第5张图片

默认属性为 visible
scroll 溢出的时候显示滚动条,不溢出的时候也显示滚动条
auto 溢出的时候才显示滚动条,不溢出的时候不显示滚动条

注意⚠️:如果有定位的盒子,请慎用 overflow:hidden 因为它会隐藏多余的部分

你可能感兴趣的:(css,css,css3)