本文探讨了CSS中两种隐藏元素的方法：visibility:hidden与display:none的区别。visibility:hidden会让元素不可见但保留其占据的空间；而display:none则完全移除元素，不占空间。通过实例代码展示了这两种属性的具体效果。
共同之处：visibility:hidden;和display:none;都是把部分内容隐藏；
不同之处：visibility:hidden；在使用它的时候，它虽然把不想要的内容隐藏了，但是它占用物理空间，还有就是在浏览器加载时，会保留它原来的物理位置，但是没有内容
display:none;它是彻底的隐藏，它不占用物理空间，在浏览器加载的时候它不参与加载，不保留原来的物理空间。
下面是它的验证代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>visibility:hidden和display:none;的异同</title>
<style>
#area{
width:400px;
height:400px;
background:green;
}
tr{
color:white;
background:purple;
}
</style>
</head>
<body>
<div id="area">
<table border="1" style="width:400px;
height:200px;">
<tr>
<td>1</td>
<td style="display:none;">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td style="visibility:hidden;">5</td>
<td>6</td>
</tr>
</table>
</div>
</body>
</html>
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/30211155/viewspace-2125186/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/30211155/viewspace-2125186/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
