极客笔记HTML 如何创建一个无换行或水平间距的隐藏 div
HTML 分割标签，即 “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>
隐藏属性
HTML元素的属性 hidden 是一个布尔值，如果元素被隐藏，则为true，否则为false。hidden属性也可以用来阻止用户在满足其他条件之前查看元素（比如选择复选框等）。
然后，可以通过移除hidden属性来使元素可见。该属性用于尚不相关但可能在以后需要的内容，以及以前需要但不再需要的内容。
使用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元素但又不带换行或水平空间的情况下，我们必须选择其他方法。
最简单的方法就是将可见性属性设置为hidden。可见性属性决定一个元素是否可见。以下是语法：
<div id=" " style="visibility: hidden">
很不幸，这种方法不是完美的，因为它仍然会创建一个新行。
Display: Inline属性
第二种更简单的替代方法似乎可以使用display: inline属性，以及visibility: hidden属性。
<div id="divCheckbox" style="visibility: hidden; display: inline;">
这种方法可以去除该行的显示，但仍然占据页面的水平空间，证明是无效的。
然而，这个问题有一个解决方案。我们将使用”display”属性设置为”none”，这样可以隐藏元素，而不会添加换行符或空格。
使用”display”属性
控制布局最重要的CSS属性是”display”属性。它指定了元素的显示行为（渲染框的类型）。
HTML规范或浏览器/用户默认样式表用于确定默认的”display”属性值。根据元素的类型，每个HTML元素都有一个默认的”display”值。大多数元素的默认”display”值为块级元素或行内元素。以下是语法示例：
element {
display: value;
}
当我们将元素的display属性设置为none时，它将完全从页面中移除，并且不会对布局产生任何影响。所有的后代元素的display属性也将被关闭。这意味着一些屏幕阅读器等辅助设备，用来让盲人能够访问网站的，将无法访问该元素。所有的后代元素的display属性都将被关闭。
示例
在这个示例中，我们将看到如何通过将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>