如何隐藏页面上存在的一个元素

这是一道面试题，“页面上有个元素，只要看不到就好了，问共有多少种方法？”css

一、display:none;

隐藏元素，元素不占用文档流空间html

二、visibility:hidden;

设置元素不可见，元素占用文档流空间面试

三、opacity:0;

透明度设置为0，元素正常渲染只是透明。也能够使用rgba(0,0,0,0)透明通道设置成透明markdown

四、position:fixed;top:-100%;

把元素定位到页面可视区域之外，使其看不到ui

五、position:abolute;top:-100%;

同4，绝对定位到页面外，或者其余元素可视区域之外spa

六、z-index:-1;

设置比较低的层级，隐藏到其余元素下边3d

七、overflow:hidden;隐藏超出的元素

使用溢出，隐藏超出可视区域之外的元素code

八、背景色，颜色同父窗口同样

设置background-color: aliceblue ; color:aliceblue;跟父容器同样，拿其余看不出来orm

九、width:0;height:0;

宽高设置为0htm

十、transform: scale(0,0);

使用transform:scale使用其余缩小为0，使其看不到，跟宽高为0差很少。能够单独设置scaleX,scaleY

十一、transform:translateX(-200px);

使用平移使用其移出可视区域外

十二、transform:skew(90deg)

使用倾斜转换，在倾斜90度时，就变成一条线，达到隐藏目的

1三、transform:rotateX(90deg)

使用X轴旋转，转到90度时，也是一条线，使其看不到

1四、transform:rotateY(90deg)

同13，只是旋转轴不同。

1五、transform:rotate3d(1, 1, 1, 120deg)

同skew同样，设置3个轴旋转，再加特定的角度

1六、transform:rotate3d(0, 1, 0, 90deg)

使用3D旋转，转90度，至关于垂直于屏幕，只是一条线。transform:rotate3d(1, 0, 0, 90deg) 也能够，matrix3d更是无所不能

1七、transform:rotate3d(0, 1, 0, 180deg);backface-visibility: hidden;

使用3D旋转，转180度，元素背对屏幕，再设置背面不可见

1八、position: relative; left:-200px;

相对定位，再加位移，移到页面可见区域之外。但DOM仍是存在的，会影响文档流

以上就是我能想到的隐藏一个元素的方法了，可能还有其余的，欢迎补充。真实使用时，可能不少方法都用不到，这道题主要仍是考查对样式的熟练程度，还有遇到一个问题时怎么去分析，从回答的过程看一我的的思惟。首先把最经常使用的方法答出来；而后是一些奇技淫巧，只是看不到，不算隐藏；再后面是CSS3里的各类变换，原理都同样只是写法不同。

如下是示例页面截图和示例代码，页脚前面有一堆的元素虽然看不到，但都占用着页面空间

<!DOCTYPE html>
<html lang="en">
<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> .box{ display: block;; width:100px; height: 100px; background-color: #CCC; text-align: center; line-height: 100px; } p{ background-color: aliceblue; width: 500px; height: 300px; position: absolute; top:100px; overflow: hidden; } .box1{ display: none; } .box2{ visibility: hidden; } .box3{ opacity: 0; } .box4{ position: fixed;top:-100%; } .box5{ position: absolute;top:-100%; } .box6{ z-index: -1; } .box7{ margin-top: 300px; } .box8{ background-color: aliceblue ; color:aliceblue; } .box9{ width:0;height: 0 } .box10{ transform: scale(0,0); } .box11{ position: absolute; transform:translateX(-200px); }/* translateY */ .box12{ transform:skew(90deg) } .box13{ transform:rotateX(90deg) } .box14{ transform:rotateY(90deg) } .box15{ transform:rotate3d(1, 1, 1, 120deg) } .box16{ transform:rotate3d(0, 1, 0, 90deg) } .box17{ transform:rotate3d(0, 1, 0, 180deg);backface-visibility: hidden; } .box18{ position: relative; left:-200px;} </style>
</head>
<body>
    <h1>如何隐藏页面上的一个元素</h1>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>

    <div class="box box9"></div>
    <div class="box box10">10</div>
    <div class="box box11">11</div>
    <div class="box box12">12</div>
    <div class="box box13">13</div>
    <div class="box box14">14</div>
    <div class="box box15">15</div>
    <div class="box box16">16</div>
    <div class="box box17">17</div>
    <div class="box box18">18</div>
    <p>
        这个页面一共隐藏了17个 box 元素
        <span class="box">box</span>
        <span class="box box8">8</span>
        <span class="box box7">7</span>
    </p>

    <footer>页脚</footer>
</body>
</html>
复制代码