在css有許多有趣的的屬性，咱們時常拿來作對比，例如display:none、visibility:hidden都是把網頁上某個元￥素暗藏起來的功能，但二者有所區別，說的簡單點，一句話概括：visibility:hidden暗藏，但在閱讀時保留位置；而display:none視為不存在，且不載入！接下用代碼做實踐：
<html>
<head>
<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、display: none--不為被暗藏的對象保留其物理空間
HTML元￥素（物件）的寬度、高度等各種屬性值都將「丟失」
2、visibility:hidden--為暗藏的對象保留其物理空間
HTML元￥素（物件）僅僅是在視覺上看不見（完整透明），而它所盤踞的空間位置依然存在。
、
載入方面問題
：1.display:;當他的值變為block 的時候，它所在的結構才會被載入進來。
2.而visibility就會在載入頁面的同時就已經把它載入進來了，因為他的值為hidden的時候，它所佔的空間還在。
文/丁向明
做一個有部落格的web前端自媒體人，專註web前端開發，關注使用者體驗，加我qq/微信交流：6135833
http://dingxiangming.com
在css有許多有趣的的屬性，咱們時常拿來作對比，例如display:none、visibility:hidden都是把網頁上某個元￥素暗藏起來的功能，但二者有所區別，說的簡單點，一句話概括：visibility:hidden暗藏，但在閱讀時保留位置；而display:none視為不存在，且不載入！接下用代碼做實踐：
<html>
<head>
<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、display: none--不為被暗藏的對象保留其物理空間
HTML元￥素（物件）的寬度、高度等各種屬性值都將「丟失」
2、visibility:hidden--為暗藏的對象保留其物理空間
HTML元￥素（物件）僅僅是在視覺上看不見（完整透明），而它所盤踞的空間位置依然存在。
、
載入方面問題
：1.display:;當他的值變為block 的時候，它所在的結構才會被載入進來。
2.而visibility就會在載入頁面的同時就已經把它載入進來了，因為他的值為hidden的時候，它所佔的空間還在。
文/丁向明
做一個有部落格的web前端自媒體人，專註web前端開發，關注使用者體驗，加我qq/微信交流：6135833兩岸商貿,在家工作,網路創業,創業賺錢思惟,微商平台,賺新台幣
http://dingxiangming.com
留言列表
