下面是自己親自動手親測代碼，有多不足請指出！其中效果請點擊這 鏈接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使元素消失的方法總結</title>
<style type="text/css">
html,document{
z-index: 1;
}
#obj1{
font-size:0;
line-height:0;
width:0;
height:0;
}
#obj2{
display: none;
}
#obj3{
visibility: hidden;
}
#obj4{
opacity: 0;
}
#obj5.outer{
background-color: #555555;
}
#obj5 .inner{
position: relative;
z-index: -1;
background-color: #f20000;
}
#obj6{
position: absolute;
clip: rect(0 auto 35px 10px);
}
#obj7{
transform:translatex(-100%);
}
#obj8{
width: 150px;
height: 150px;
overflow: hidden;
}
</style>
</head>
<body>
<h2>方法1 將元素的font-size，line-height,width,height設置爲0 </h2>
<img src="https://avatar-static.segmentfault.com/171/756/1717563857-5baf8aa8a97b5_huge256" id="obj1">
<hr>
<h2>方法2 display:none 方法</h2>
<img src="https://avatar-static.segmentfault.com/171/756/1717563857-5baf8aa8a97b5_huge256" id="obj2">
<hr>
<h2>方法3 visibility：hidden 方法</h2>
<img src="https://avatar-static.segmentfault.com/171/756/1717563857-5baf8aa8a97b5_huge256" id="obj3">
<hr>
<h2>方法4 opacity：0 方法</h2>
<img src="https://avatar-static.segmentfault.com/171/756/1717563857-5baf8aa8a97b5_huge256" id="obj4">
<hr>
<h2>方法5 z-index:-1</h2>
<div id="obj5" class="outer">
<p>outer</p>
<div class="inner">
<p>inner</p>
<img src="https://avatar-static.segmentfault.com/171/756/1717563857-5baf8aa8a97b5_huge256">
</div>
</div>
<hr>
<h2>方法6 設置元素的clip (必須將position的值設爲absolute或者fixed，此屬性方可使用)</h2>
<img id="obj6" src="https://avatar-static.segmentfault.com/171/756/1717563857-5baf8aa8a97b5_huge256">
<hr>
<h2>方法7 設置元素的transform的translateX（Y）的值爲-100% （移出到屏幕外，而且屏幕滾動條不出現）</h2>
<img id="obj7" src="https://avatar-static.segmentfault.com/171/756/1717563857-5baf8aa8a97b5_huge256">
<hr>
<h2>方法8 overflow:hidden將要隱藏的元素移除父元素的範圍</h2>
<div id="obj8">
<img src="https://avatar-static.segmentfault.com/171/756/1717563857-5baf8aa8a97b5_huge256">
</div>
</body>
</html>