专注于WEB技术的IT博客

display:none与visibility:hidden不同的隐藏

时间:2012-10-08分类: Css浏览:9850
分享到:

    相同点:display:none和visible:hidden都有把网页上某个元素隐藏起来的功能。


区别:
visibility:hidden--为隐藏的对象保留其物理空间
display: none--不为被隐藏的对象保留其物理空间

    文字看起来不好理解,我喜欢实例,下面是我整理的一个经典实例,分享一下:

<html>
  <head>
  <title> display:none与visibility:hidden的区别</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>

     

    还好,调试时我连图也截上了,看图:

    结合前面的代码一起看,如果还看不明白,最好自己动手实践一下!


 

    本文首发WBlog博客,欢迎转载!转载请注明本文地址,谢谢。


本文地址:http://w3note.com/web/25.html

猜你喜欢
bootstrap布局篇详解(二)
bootstrap布局篇详解(一)
Bootstrap“减肥”优化攻略
使用Bootstrap轻松打造你的网站
有了Bootstrap再也不担心网站的前端设计
nec更好的解决css方案
几款纯css打造的超酷按钮实例
推荐一款tab切换(js+css)
兼容主流浏览器的css渐变色
960网格系统模板设计的利器
标签 : css
除非注明,本文首发网志博客,欢迎转载!转载请注明本文地址:http://w3note.com/web/25.html,谢谢。
  • 评论
  • 赞助本站