面试题——关于隐藏一个盒子模型，有多少种方法？给定一个 div 盒子，你有多少种隐藏的方法？不写脚本的情况下方法一：d

给定一个 div 盒子，你有多少种隐藏的方法？不写脚本的情况下

方法一：display : none;

这是最常见的隐藏效果实现，通过让一个元素注释掉，从而做到隐藏起来，但是它存在于文本文档中，也不占用原来位置，也就是说可以被脚本调用，看看下面例子

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            display: none;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

看看浏览器

可以看到浏览器已经没有这个盒子了，但是检查文档会看到该元素依然在，但是它不占位置了。

方法二：visibility : hidden

该方法可以将盒子通过 visibility : hidden 的方式将一个盒子隐藏起来，但是浏览器上依旧占着原来的位置。

看看下面例子

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;  
            background-color: skyblue;
            visibility: hidden;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

看看浏览器

可以看到浏览器是空出一个位置，但是我们已经是看不见的

方法三：overflow : hidden

这种方法是通过多出盒子大小的进行裁剪看，也是最常见的方式之一

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;  
            background-color: skyblue;
            /* overflow: hidden; */
        }

        .box2 {
            width: 200px;
            height: 50px;
            background-color: pink;
        }
        .box3 {
            width: 100px;
            height: 100px;  
            background-color: skyblue;
            overflow: hidden;
        }

        .box4 {
            width: 200px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
<hr>
    <div class="box3">
        <div class="box4"></div>
    </div>

</body>

看看浏览器

可以看出，一个添加了overflow : hidden和一个没有添加，按照这样的方式也能做到将盒子模型隐藏起来