display:none和visibility:hidden的区别

最新推荐文章于 2024-06-05 00:48:32 发布

Syleapn

最新推荐文章于 2024-06-05 00:48:32 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： display none visibility hidden

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

visibility和display两个属性都有隐藏元素的功能，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>

结果：

说明：

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

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

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

>>渲染树render tree

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

Syleapn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
display:none和visibility:hidden的区别

转载自新浪博客-&gt;最初的你,文章地址：http://blog.sina.com.cn/s/blog_51048da7010185io.htmlvisibility和display两个属性都有隐藏元素的功能，display:none和visibility:hidden的区别，简单的总结一句话就是：visibility:hidden隐藏，但在浏览时保留位置；而display:none视为不存在，...
复制链接

扫一扫

专栏目录