元素的可视性，是指元素是否可见，在CSS中，可以通过可视性(visibility)，控制元素的可视性，使用可视属性，只能完全显示或者隐藏相应元素，无法显示部分元素内容。
1.可视属性visibility
用来定义元素及其内容是否可见，如：
visibility: visible | collapse | hidden
其中各属性值的含义如下：
visible: 可见，定义元素正常显示。
collapse: 隐藏表格的行或者列(浏览器暂不支持)
hidden:元素不显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CSS属性 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
div {
visibility: hidden;
width: 300px;
height: 100px;
background: #666666;
}
span {
background: #999999;
}
</style>
</head>
<body>
<div>这是一个隐藏可视性的元素</div>
<span>这是一个内联元素</span>
</body>
</html>
如上图所示，使用可视性属性隐藏元素之后，元素占有的物理空间并没有发生变化，页面中的其他元素按照隐藏元素依然存在的方式进行排列。
2.可视属性与显示方式属性的关系
在CSS中，可视属性用来控制元素是否显示，显示方式属性用来定义元素的显示方式，如果在显示方式属性中定义了元素显示方式为隐藏(none),那么无论使用
什么可视属性值，元素依然无法显示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> CSS属性 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
div {
display: none;
visibility: visible;
width: 300px;
height: 150px;
background: #666666;
}
p {
width: 400px;
height: 150px;
border: 2px solid #000000;
background: #999999;
}
</style>
</head>
<body>
<div>这是一个块元素</div>
<p>这是另一个块元素</p>
</body>
</html>
如上图所示，由于在显示方式中定义了隐藏属性值，所以即使在可视属性中定义属性值为可见，依然无法显示元素及其内容。