关于元素的显示与隐藏

元素的显示与隐藏

当有些时候我们想让一个元素仅仅用来被页面选中的其他元素重复使用，提供某种信息，而非直接展示给用户使用时，我们就会会需要元素的隐藏。在网页的应用中，显示/隐藏某个元素或是组件是一件经常要做的事，尤其是现在的一些比较流行的单页应用中。
目前比较主流的显示/隐藏方式有两种：
1.CSS里面的display:none;
2.CSS里面的visibility:hidden。
他们都会使元素或组件隐藏，但是display:none不占据页面空间，不会影响布局，因为这个属性是让元素不可见，根本没有渲染出来，想让它渲染出来可以使用display:block。而visibility:hidden任然是占据空间的，只是让人看不见它而已，想让它能够被看见也很简单，使用visibility:visible就行了。

display:none的应用：

首先写一个div出来：

当然，这看不出来什么，然后在画一个不同的矩形来对比一下

然后给红色的div加上属性：dispaly:none。

这时红色的方块就消失了，来看检查元素的红色标记位置，属性为display:none，此时该元素就被隐藏了。

visibility:hidden的应用：

同上一样，先画两个图形用作比较：

然后在红色div的样式里面加入visibility:hidden属性。

这时神奇的事发生了，红色的方块消失了但是它任然占据着空间。
以上就是元素的显示/隐藏，希望对您有所帮助。