CSS隐藏元素的十四种方法

1. 通过设置width:0或者height:0隐藏一个元素，文字隐藏可以设置color为背景色或transparent，但内容还在，所以用font-size:0；

2. 将元素的opacity设置为0，元素本身还在，只是看不见；

3. 通过绝对定位将元素移出屏幕范围，文字可通过text-indent隐藏，元素还在，只是超出了屏幕范围看不见（可以给页面添加LOGO图片，同时添加文字让搜索引擎搜索到）；

4. 通过z-index隐藏，但是默认背景是透明的，需要给元素添加一个背景，元素还在；

5. 超出元素宽高部分，设置overflow:hidden来隐藏超出部分，文字需省略号时加上text-overflow:ellipsis；

6. 通过设置visibility:hidden，元素不可见，但还占位置；

7. 通过设置display:none将元素彻底隐藏，不占位置；

8. 将元素的背景设置为透明，字体大小设置为0，元素不可见，但还占位置；

9. 将元素的max-height或max-width设置为0，但会有文字溢出的问题，需设置font-size为0；

10. 通过transform的translate隐藏元素，相当于定位将元素移出屏幕范围；

div{transform:translate(-99999px);}

11. 将元素的缩放设置为0；

transform:scale(0);

12. 让元素重叠，类似width等于0；

div{transform:skew(90deg):}

13. 设置margin为负值，将元素移出屏幕可视区；

div{margin-left:-99999px}

14. 将元素剪裁。

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