[知识点滴]HTML页面元素显示&隐藏方式及区别

作为前端大家都知道在网页中控制元素的显示与隐藏的方式有很多，不过大家更喜欢的是使用 display: none; 以及 display: block; 的方式来操作。理论上来说，这个方式是最简单有效的，不过在这里我想说几个小志个人对显示隐藏页面元素的几种方式看法：

display 属性的方式；
visibility 属性的方式；
opacity 属性的方式；
width & height 属性的改变；
transform 属性中的 scale 属性值的利用；
zoom 属性的使用；
position 定位属性的方式；
margin 属性的利用；
transform 属性中的 translate 属性值的利用；
background & color 等颜色值相同时；
mask 属性的使用；
……

可能还有更多的，不过目前暂时我想到的就这么几个，并且这里的几个大概有这么几个共通点：

可见与不可见；
透明度的改变；
元素大小的改变；
元素位置的移动；
找个遮挡物；

通过上面的几个特性，我们可以根据具体的页面情况来选择使用，或者结合使用。

###可见与不可见

看得见的与看不见的，其实隐藏了就看不见了，不隐藏么当然就看见咯。在 CSS 中控制元素的不可见，常用的首选的肯定是 display: none; 的方式了，其次应该就是 visibility 这个属性。对于这两个属性，最大的区别就是：

display: none; 直接“销毁”元素在页面中的位置；
visibility: hidden; 直接让元素不可见，但元素的物理空间位置还是存在的；

如果要让元素从不可见到可见的状态，根据我们使用的 CSS 属性，去修改属性值即可，常见的就是：

display: block; 
visibility: visible; 

不过如果页面元素中使用 transition 来作为过渡效果的话，那么这两种可见与不可见的过渡效果就可能看不到了哦。

其实我还想说一下 display 属性控制显示隐藏的一些注意点，不过呢，我先把其他几个所谓的隐藏和显示的方式扯完再说。

##透明度的改变

这个理解不难，在 CSS 中我们一般使用 opacity 属性来修改透明度，只要设置 opacity: 0; 那么元素就看不到了，变透明了。

这时候元素仅仅只是透明了，位置还是存在的，要想显示出来，只要把 0 改为 1 即可。同时，如果使用了 transition 来做过渡效果的话，我们还是可以看到一个从透明到不透明的过渡情况。

##元素大小的改变

元素大小的改变，不仅可以通过 width & height 属性来实现（当 width & height 的值为 0 时），还可以通过 transform 属性中的 scale 来实现，甚至可以使用 zoom 的方式来实现。

###不过需要注意的几点是：

zoom 的方式不会在 transition 时有过渡效果；
使用 zoom 属性值，设置为 zoom: 0; 不一定会有效果，不过可以使用 zoom: 0.000009; 这样来实现；
transform: scale(0); 虽然让元素不可见了，不过元素的物理位置还是在，就算是 transform: scale(5); 放大了，元素原有的位置大小还是同样保留，这个跟 zoom 还是有区别的；
width & height 属性的使用这个很简单也好理解，就是把元素的物理位置大小直接修改了，然后变为 0 的时候就什么都看不到咯，当然，这个在 transition 中也是可以看到过渡效果的；

##元素位置的移动

这个也好理解，通过改变元素的位置，挪到页面外面去就好了。那么改变元素的位置当然就是要使用 position/margin/transfrom: translate 的方式了；

##不过需要注意的是：

 position: relative; 会保留元素原有的位置；
而 position: absolute; 或者 position: fixed; 则会让元素原来的位置消失；当然，使用了 position 属性后，top/right/bottom/left 这四个值还是需要去选择使用的，不然位置不会改变；
margin 属性无非也就是四个方向设置很大的值，然后改变位置，不过位置是改变了，原来的物理位置还是在的；
transform: translate 的方式如果不考虑 translate3d 的时候，可以简单理解成类似 margin 的方式，位置也是保留的，如果是考虑 translate3d 的话，也还是位置的改变，只不过不再是水平或者垂直方向的改变了；

以上说的位置改变来让元素隐藏，结合 transition 都是可以看到过渡效果的。

##找个遮挡物

这个方式感觉有点掩耳盗铃，自欺欺人了，无非就是通过背景色和元素内容颜色相同什么的，让人的肉眼不会第一时间看到，或者通过把 z-index 的属性值设置为负值或者被其他元素的 z-index 属性值小的时候，丢到后面去让人看不到。

在 CSS 3 中新增了一个 mask 属性，我们或许也是可以利用这个方式来让一个元素从有变无。

感觉这个方式好 low，基本上对于让元素显示或者隐藏不会去使用的，只会在特定情况下去使用一下。

##小结一下

以上只是个人对于显示与隐藏的一点小看法，或许还有其他方式，但感觉上应该都差不多，可能是在这些基础上做了一些变化吧。那么具体我们会去使用什么方式来显示隐藏页面元素，还是要结合需求点来考虑。

可能有部分人觉得使用 transition 产生一个过渡效果会更好，那么就不能使用 display 和 visible 的方式了，或许可以考虑使用 width & height & opacity 的方式来使用。记得 jQuery 中 show() 和 hide() 就是通过这种方式来实现的，不知道有没有记错。

##最后简单谈一下 display

一般情况隐藏元素大家都还是会去使用 display: none; 的方式，然后通过 display: block; 让元素显示出来。不过这里就小志个人所接触的情况来看，使用 display: block; 显示元素的这个时候，大部分针对的这个元素是 div 标签或者其他的块级元素。

毕竟类似 div 这样的块级元素只是用来包含其他元素的一个“无语义”的标签。

但是请大家不要盲目使用使用 display: block; 方式来改变原本 display: none; 隐藏掉的元素，因为并不是所有元素都是块级元素。我们还是需要有针对性的去设置 display 的属性值。

span 之类的内联元素，我们应该使用 display: inline; 或者 display: inline-block;
table 标签元素我们应该使用 display: table;
td 或者 th 的话，我们可能需要使用 display: table-cell;

……

当然，这也并不是绝对的，关键还是看各位在使用这些标签的时候，是不是事先就已经改变了这个标签 display 属性值。不注意这个 display 属性值的话，可能当我们把元素从隐藏转变为显示的时候，页面的布局也会改变了。