資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何建立不換行或不留水平空格的隱藏 div？
HTML 的 div 標籤（縮寫為“div”）是一個特殊的元素，允許你將網頁上類似的內容組合在一起。它可以用作通用容器來組合類似的內容。因此，<div> 標籤用於將 HTML 文件分成幾個部分。還可以使用 <div> 標籤一次性將 CSS 樣式應用於多個元素。
div 標籤用途廣泛；我們可以用它在網頁上完成各種任務。我們主要在網頁佈局和 CSS 藝術中使用它，但它非常通用。它成對使用。文字寫在開始(<div>)和結束(</div>)標籤之間的空間中。
這是一個 div 標籤的通用示例，它顯示瞭如何將多個元素組合到單個容器中並一次性設定樣式。
示例
<!DOCTYPE html>
<html>
<head>
<title>Example of Div</title>
<style>
.DivElement{
background-color:lightpink;
padding:10px;
color:white;
border: 3px solid deeppink;
}
</style>
</head>
<body>
<h1>A Div Element</h1>
<div class="DivElement">
<p>Hello</p>
<h3>We are inside a div element</h3>
<h4>We are inside a div element</h4>
<h5>We are inside a div element</h5>
</div>
</body>
</html>
“hidden” 屬性
HTML 元素屬性hidden是一個布林值，如果元素隱藏則為 true，否則為 false。hidden 屬性還可以用於阻止使用者檢視元素，直到滿足不同的條件（例如選中複選框等）。
然後可以透過刪除 hidden 屬性來使元素可見。此屬性用於尚不相關但以後可能需要的內容；以及以前需要但現在不再需要的內容。
<div> 元素也可以使用 hidden 屬性使其不可見。隱藏的 div 元素不可見，但它仍然保留在頁面上。刪除 hidden 屬性後，它將重新顯示。
語法
以下是語法
<div hidden> or <div hidden="hidden">
示例
<!DOCTYPE html>
<html>
<head>
<title>Example of Div</title>
<style>
</style>
</head>
<body>
<h1>A Div Element</h1>
<div class="DivElement" hidden="hidden">
<p>Hello</p>
<h3>We are inside a div element</h3>
<h4>We are inside a div element</h4>
<h5>We are inside a div element</h5>
</div>
</body>
</html>
隱藏 Div 且不留水平空格或換行符
正如我們已經討論的那樣，隱藏的 div 元素雖然不可見，但仍然佔用頁面空間。在必須建立不換行或不留水平空格的隱藏 div 元素的情況下，必須選擇其他方法。
最容易想到的方法是將 visibility 屬性設定為 hidden。visibility 屬性決定元素是否可見。以下是語法
<div id=" " style="visibility: hidden">
不幸的是，此方法並非萬無一失，因為它仍然會建立新行。
display: inline 屬性
第二個看似可行的簡單替代方法是將display: inline屬性與visibility: hidden屬性一起使用。
<div id="divCheckbox" style="visibility: hidden; display: inline;">
此方法消除了換行符，但仍然佔用頁面上的水平空間，因此無效。
但是，這個問題有一個解決方案。與其使用上述方法，我們將使用設定為“none”的 display 屬性，該屬性可以隱藏文件中的元素，而不會新增換行符或空格。
使用“display” 屬性
控制佈局最重要的 CSS 屬性是 display 屬性。它指定元素的顯示行為（渲染框的型別）。
HTML 規範或瀏覽器/使用者預設樣式表用於確定預設 display 屬性值。根據元素型別，每個 HTML 元素都有一個預設 display 值。大多數元素的預設 display 值為 block 或 inline。以下是語法：
element {
display: value;
}
當我們將元素的 display 屬性設定為 none 時，它將完全從頁面中移除，並且不會影響佈局。所有子元素的顯示也會被關閉。這也意味著諸如螢幕閱讀器之類的裝置（使網站能夠被盲人訪問）將無法訪問該元素。所有子元素的顯示都將關閉。
示例
在此示例中，我們將看到如何透過將 display 屬性設定為 none 來建立不換行或不留水平空格的隱藏 div。
<!DOCTYPE html>
<html>
<head>
<title>How to Create a Hidden Div without a Line Break or Horizontal? Space?</title>
<style>
#hiddenDiv {
display: none;
}
</style>
</head>
<body>
<h1>Hidden Div Tag</h1>
<p>There is a hidden div element below.</p>
<div id="hiddenDiv">This is the hidden div.</div>
</body>
</html>
瀏覽量：585
