码迷,mamicode.com
首页 > Web开发 > 详细

个人收集(转载)CSS中 display:none和visibility:hidden的区别

时间:2016-10-18 13:22:17      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

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>
结果如下:
技术分享

个人收集(转载)CSS中 display:none和visibility:hidden的区别

标签:

原文地址:http://www.cnblogs.com/runningin/p/5972773.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!