欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

display:none和visibility:hidden的区别

程序员文章站 2024-02-19 08:36:18
...

转载自新浪博客->最初的你,文章地址:http://blog.sina.com.cn/s/blog_51048da7010185io.html


visibilitydisplay两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏览时保留位置;而display:none视为不存在,且不加载!

1、visibility:hidden->为隐藏的对象保留其物理空间
HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。

2、display: none->不为被隐藏的对象保留其物理空间
HTML元素(对象)的宽度、高度等各种属性值都将“丢失”


实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table>
    <tr>
   <td>
    <table border="1">
    <tr>
     <td>第一行</td>
    </tr>
    <tr style="display:none">
     <td>第二行</td>
    </tr>
    <tr>
     <td>第三行</td>
    </tr>
    </table>
   </td>
   <td>
    <table border="1">
    <tr>
     <td>第一行</td>
    </tr>
    <tr style="visibility:hidden">
     <td>第二行</td>
    </tr>
    <tr>
     <td>第三行</td>
    </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td>style="display:none"</td>
   <td>style="visibility:hidden"</td>
  </tr>
</table>
</body>
</html>


结果:

display:none和visibility:hidden的区别


说明:

为了更深入理解,推荐这篇文章,可参考

1、您可能不知道的CSS元素隐藏“失效”以其妙用

2、跟着w3c标准来探讨display:none;与visibility:hidden;的区别->此文章中提到渲染树等系列,不懂的戳下面文章,可以帮助更好的理解:

>>渲染树render tree

>>浏览器的渲染原理简介