IT工程師數位筆記本

1. width:0;

光有高度是不行的，還得有寬度。缺點文字隱藏不了，可以加個color:#fff和背景顏色一樣就ok了，障眼法，迷惑人的，其實內容還在，如果有文字的話，還是可以觸發點擊事件的，這種做法很多黑客就會利用在目標站點鏈接上加一個和背景顏色一樣的讓管理員發現不了。

2. height:0;

和上面一樣,一個物體至少得有寬和高。

3. opacity:0;

元素還在，只是看不見而已。

4. position:absolute;left:-9999px;

元素還在，只是超出了屏幕范圍。

5. text-indent:-9999;

只能達到隱藏文字的效果，沒有其他副作用。給頁面添加logo圖片，還想seo添加文字又不想顯示這段文字，就可以使用這個方法。

6. z-index:-99999;

需要配合定位使用，層級太低導致我們無法看見這個元素，使用這個缺點還是很多的，首先就算你z-index:-9999了并且定位，但如果這個元素比后面的元素高了或者寬了，再著有文字一樣還是可以看到這個元素。

代碼如下：

<style>
   #box{
      width:100px;
      height:100px;
      background-color:red;
      position:absolute;
      z-index:-9999;
   }
</style>
<div id="box">111111</div>
<div>為什么要這樣</div>

7. overflow:hidden;

如果元素超出所設置的寬和高，剩下的部分就會被隱藏，如果想讓整個元素隱藏，設置寬和高為0就行。

width:0px;
height:0px;
overflow:hidden;

8. visibility:hidden;

元素被隱藏，但是還占位置。

9. display:none;

元素被隱藏，并且不占位置。

10. background-color:#fff;

把元素的背景顏色設置成body的背景，障眼法。

11. max-width:0px;

和width:0px;原理一樣。

12. max-height:0px;

和height:0;原理一樣。

13. background-color:rgba(0,0,0,0);color:#fff;

把元素透明度設置成0，達到看不見的效果，和opacity原理一樣。如果想讓文字也看不見，給它一個障眼法就好了,或者font-size:0

14. font-size:0px;

隱藏文字的效果。

15. transform:translate(-9999px);

和left:-99999px;原理一樣，把元素移出屏幕可視區。

16. transform:scale(0);

讓元素的大小設置成0不就看不見了哈。

17. transform:skew(90deg);

讓元素重和，看不見了。

18. margin-left:-9999px;

把元素移出屏幕可視區

19. -webkit-clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);

把元素剪裁了。