简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

[HTML/CSS]display:none和visibility:hidden的区别_html/css_WEB-ITnose

WBOY
發布： 2016-06-24 11:49:51
原創
1397 人瀏覽過

写在前面

在群里有朋友问这样一个问题，display:none的标签，影响了布局。这就引出了本篇这样的问题，印象中display:none的块元素是不占位置的。

一个例子

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title></head><body>    <div style="width:100%;height:200px;border:1px solid red;">第一个层</div>    <div style="width:100%;height:200px;border:1px solid black;">第二个层</div></body></html>
登入後複製

浏览结果

为第一个层设置样式visibility:hidden

    <div style="width: 100%; height: 200px; border: 1px solid red; visibility: hidden;">第一个层</div>    <div style="width:100%;height:200px;border:1px solid black;">第二个层</div>
登入後複製

　　浏览结果

那么为第一个层设置display:none样式

通过上面的对比，你也会发现display:none可以让块元素隐藏并不占位置。而visibility:hidden虽然使块元素隐藏了，但仍占位置。

总结

1、display:none：元素隐藏，不占位置。

2、visibility:hidden：元素隐藏，占位置。

相關標籤：
[HTML/CSS]display:none和visibility:hidden的区别
來源：php.cn
上一篇：最近Get到的一些HTML/CSS中的小点（一）_html/css_WEB-ITnose 下一篇：CSS--LESS入门_html/css_WEB-ITnose
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
CSS 屬性選擇器和輸入標籤的偽元素之間的區別 **CSS檔案內部：**input[type="text"]{border:2pxsolidred;}input::placeholder{color:gree...
來自於 2023-09-10 15:43:12
0
1
184
靜態網站和動態網站的開發過程中都需要編碼，它們之間有何不同？ 我有一個疑問：使用html/css/js程式碼等開發的靜態網站和動態網站有什麼區別？您是否有一些範例可以給我看？
來自於 2023-09-08 00:04:03
0
1
272
建立一個在Quarto中類似RMarkdown中固定表頭的功能 我一直在嘗試在Quarto中渲染一個來​​自table1R包的黏性表頭，就像我在RMarkdown中成功做到的那樣。然而，Quarto似乎無法識別我的.css文件，或者（更有可能的...
來自於 2023-08-29 17:12:38
0
1
264
React應用程式中無法使用即時伺服器的原因是什麼？ 我知道使用即時伺服器無法提供React應用程式。換句話說，即使將js捆綁並連結到HTML文件，如果您靜態地打開文件，React程式碼也不會渲染。我了解了靜態和動態伺服器，但由於Re...
來自於 2023-08-28 10:32:47
0
1
253
為什麼選擇HTML5語意化標籤而非div標籤？ 為什麼要使用HTML5語意化標籤，如headers、section、nav和article，而不是簡單地使用div並將其設定為首選的css？我創建了一個網頁並使用了這些標籤，但它們...
來自於 2023-08-22 23:00:37
0
2
220
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！