DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> display:none和visibility:hidden的區別
display:none和visibility:hidden的區別
編輯:前端技巧     

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>

對於上面的代碼,我們可以使用“HTML在線編輯器”進行測試一下。

預覽效果如下:

本文來源:最初的你-新浪博客(http://blog.sina.com.cn/s/blog_51048da7010185io.html)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved