戏说隐藏元素的那些属性

@隐藏元素的那些属性

前言

有的时候，我们用CSS写网页，有些特殊的元素我们会用到，但是后面有不想它在网页上出现。那怎么办呢？
这时，我们会把某一元素给隐藏掉，这时，元素虽然存在，但是页面上不会出现，这就称为隐藏元素。那么，有哪些属性可以实现隐藏效果呢？
visibility、display、opacity、overflow都可以实现元素的隐藏效果，甚至position也可以实现。

visibility

visibility属性（显示/隐藏）元素，当取值为hidden时就会隐藏，但是元素还是会占据页面的空间，就是说这个元素虽然隐藏了，却还是在本来的位置。
用法

效果，页面上只剩下一个DIV

display

display既可以改变元素的结构属性，也能隐藏元素，当取值为none时，display的作用就是隐藏元素。
用法

效果

visibility和display的区别

display隐藏元素，不占有之前的位置，脱离了文档流
visibility隐藏元素，占有之前的位置，没有脱离文档流，所以导致空间依然存在
两种方法总的来说区别不大，都可以达到预期的效果，具体用哪种要视情况而定

opacity

严格来说opacity跟以上的前两种属性不一样，因为opacity是改变元素的透明度来实现元素的隐藏效果的。当取值为0的时候，元素就会变成完全透明的状态，就跟隐藏了一样。其实opacity更多是用在背景上，变成了若隐若现的状态。它取值范围是0～1之间，1为不透明

overflow

overflow属性叫做溢出处理属性，取值为hidden的时候，会隐藏内容。什么意思呢？就是说，这个属性只能处理溢出父元素之外的内容。而且缺点就是，如果后面还要加内容的话，那会一起隐藏掉。所以建议隐藏元素不要用这个属性,隐藏父元素多余的内容倒是可以

position

position属性，没想吧，这个属性也可以隐藏元素!position名叫定位属性，当你想让它隐藏元素时，就设置它的值，设到页面看不见的地方呗