这是一道面试题，“页面上有个元素，只要看不到就行了，问共有多少种方法？”
1、display:none;
隐藏元素，元素不占用文档流空间
2、visibility:hidden;
设置元素不可见，元素占用文档流空间
3、opacity:0;
透明度设置为0，元素正常渲染只是透明。也可以使用rgba(0,0,0,0)透明通道设置成透明
4、position:fixed;top:-100%;
把元素定位到页面可视区域以外，使其看不到
5、position:abolute;top:-100%;
同4，绝对定位到页面外，或者其他元素可视区域以外
6、z-index:-1;
设置比较低的层级，隐藏到其他元素下边
7、overflow:hidden;隐藏超出的元素
使用溢出，隐藏超出可视区域以外的元素
8、背景色，颜色同父窗口一样
设置background-color: aliceblue ; color:aliceblue;跟父容器一样，拿其他看不出来
9、width:0;height:0;
宽高设置为0
10、transform: scale(0,0);
使用transform:scale使用其他缩小为0，使其看不到，跟宽高为0差不多。可以单独设置scaleX,scaleY
11、transform:translateX(-200px);
使用平移使用其移出可视区域外
12、transform:skew(90deg)
使用倾斜转换，在倾斜90度时，就变成一条线，达到隐藏目的
13、transform:rotateX(90deg)
使用X轴旋转，转到90度时，也是一条线，使其看不到
14、transform:rotateY(90deg)
同13，只是旋转轴不一样。
15、transform:rotate3d(1, 1, 1, 120deg)
同skew一样，设置3个轴旋转，再加特定的角度
16、transform:rotate3d(0, 1, 0, 90deg)
使用3D旋转，转90度，相当于垂直于屏幕，只是一条线。transform:rotate3d(1, 0, 0, 90deg) 也可以，matrix3d更是无所不能
17、transform:rotate3d(0, 1, 0, 180deg);backface-visibility: hidden;
使用3D旋转，转180度，元素背对屏幕，再设置背面不可见
18、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>
