CSS3之“隐藏”元素的方法
Posted IT大亨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3之“隐藏”元素的方法相关的知识，希望对你有一定的参考价值。
说起css的隐藏元素，我想小伙伴们会想到的就是display：none了吧，这也是小伙伴们知道的最常用的方式，不过还有visibility：hidden，这也是很常用的，很多人应该也知道吧，但是这两者还是有所不同的。
其实除了这两种办法，还有些方式也可以隐藏元素的，而这篇文章就是来分享不同的隐藏元素的办法，欢迎小伙伴们能够提出更好的建议。
第一种方法，就是人们所熟知的，即display:none；
display：none；（是最常用的隐藏元素的方法）
eg：
h. element{
display:none;
}
将元素设置为display:none后，元素会彻底消失，元素不占位，其他元素会占它的位置，在页面显示为无，display:none;对于布局的层次结构是很重要的，对于它的使用也要很谨慎。
第二种方法，即visibility:hidden；
visibility:hidden；
设置元素的visibility：hidden；也是一种常用的方法，和display:none的区别就是，display：none；不占位，而visibility：hidden；占位。用了visibility：hidden；元素在页面消失后，实际上它是隐藏的，它会占据标准文档流。
eg：
h. element{
visibility:hidden
}
visibility:hidden；适用于那些元素隐藏后不希望改变页面布局的情况。
第三钟方法：即opacity:0；
opacity:0；
opacity属性是元素的透明度，把透明度设为0，元素在页面中也是隐藏的，也是看不到的。
eg：
transparent {
opacity:0;
}
opacity:0;元素隐藏后仍占位，占据标准文档流，设置透明度为0后，元素只是隐藏了，但它依旧存在页面中。
第四种办法：改变height，width为0
height，width为0
简单说就是将元素的margin，border，padding，height，width设成0，但是父元素内有子元素，还要把子元素overflow:hidden；来隐藏其子元素。
eg：
h. element {
margin:0;
border:0;
padding:0;
height:0;
width:0;
overflow:hidden;
}
这种宽高设为0的方式用起来不好，也可能存在一些问题。
第五种办法：用position改变left,top的值
position改变left,top的值
用position改变left,top的值，达到看不见的效果。
eg：
h. element {
position: absolute;
top: -999px;
left: -999px;
}
用position改变left,top的值，不占据标准文档流，点击不了，达到看不见的效果，也可以用来隐藏元素。
第六种办法：拿一个白色的div盖住
第七种办法：给margin一个负值，也可以达到让元素隐藏，达到看不到的效果。
如果朋友们有什么建议，文章有需要补充的地方，希望大家能够多多指出更好的建议。
以上是关于CSS3之“隐藏”元素的方法的主要内容，如果未能解决你的问题，请参考以下文章