WEB的隐藏技能

在web网页的开发过程中,大部分的文本,图片或者视频等都是可见的,但是有些相关元素是默认是需要隐藏的,当鼠标悬停上去之后才会显示,比如下面的红色所示部分.

这类的效果在页面中存在的概率特别高,那么想要让一个元素隐藏的实现方案有很多,只是每种不同的实现方法的原理和最终呈现结果的渲染方式是不同的。那总体来看想要实现该隐藏的效果至少有10多种方法，具体如下：
1．设置display的值为none。
2．给对应的元素添加 html的hidden属性。
3．负margin值，数值给用负数，只要数值足够大，就可以让一个元素移出视口外。
4．负text-indent值，也是只要数值足够大，就可以让文本隐藏的效果。
5．设置height、font-size和line-height值为0，让元素在视觉上不可见。
6．CSS的clip让元素在视觉上不可见。
7．position:absolute配合任何一个足够大的left、right、bottom或top的负值，让元素不在视口范围内显示。
8．visibility设置值为hidden在视觉上让元素不可见。
9．opacity设置值为0在视觉上让元素不可见。
10．使用transform里面的缩放来进行不可见隐藏。
当前想要隐藏一个元素的方法不仅仅有这些，其他的也可以。上面所提到的方法，有的是让 一个元素彻底隐藏，所谓的彻底隐藏就是元素的空间和里面的内容都不见；还有的方法只是隐藏内容，但是空间还在，如果想要彻底的掌握应该在什么