数据结构
网络
关系数据库管理系统 (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
