CSS核心（三十三）元素的显示和隐藏 display与visibility的区别
display有两个值，display:none;表示隐藏元素，隐藏后不占网页空间，后面的元素会自动进入该空间。display:block;可以让隐藏的元素显示出来，但它是以块元素的形式显示，其实是将一个元素转为了块元素，显示后占一行。visibility也有两个值，visibility:hidden;表示隐藏元素，隐藏后占网页空间，即：该空间的占位会保留。visibility:visible;显示隐藏的元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素的显示和隐藏 display与visibility的区别</title>
</head>
<style>
.box{
width:400px;
height:400px;
background:#0f0;
}
.small{
width:200px;
height:200px;
background:#f00;
margin:0 auto;
/* display隐藏,不占空间 */
/* display:none;*/
/* visibility隐藏，占空间 */
visibility:hidden;
}
.box:hover .small{
/* 让元素以块元素的形式出现 */
/* display:block; */
visibility:visible;
}
</style>
<body>
<div class="box">
<div class="small">隐藏显示</div>
</div>
</body>
</html>
显示结果如下：
将鼠标移动到父元素上显示隐藏的元素。
会写程序不难,但要成为大师就不仅仅是学编程就能达到的。 看了此帖，让我更加的感到我自身的不足`~~我要更加努力的学习~学习~~学海是无涯的`~~~ 已经看过了但是现在看到还是要顶你呵呵 很受看！ 谢谢提点 不错！ 写的非常棒。感触很深！ 俺和你们说哟，我还没毕业出来的，。其实计算机这方面我很菜，我自己都这样认为，但是尽管这样我还是能在苏州这边的IT里面工作，我感情很幸福，有时候幸福降临的时候挡也挡不住，真的我很喜欢现在这样，因为我比老哥幸运的多了，。111 感慨啊，，，，基础啊。。。。。