每日笔记，CSS 控制布局,css隐藏模块
display 属性是用于控制布局的最重要的 CSS 属性。
display 属性
display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
此面板包含一个 <div> 元素，它默认是隐藏的。（display: none）
它由 CSS 设置样式，我们使用 JavaScript 显示它。（更改为 display: block）
点击这里来显示面板
该面板包含一个 div 元素，默认情况下该元素是隐藏的（display: none）。
它使用 CSS 进行样式设置，我们使用 JavaScript 来显示它（display: block）。
工作原理：请注意，带有 class="flip" 的 p 元素有 onclick 属性。当用户单击 p 元素时，将执行一个名为 myFunction() 的函数，该函数将 id="panel" 的 div 样式从 display:none（隐藏）更改为 display:block（可见）。
块级元素（block element）
块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
<div style="border: 3px solid #ba3537;line-height: 1.5; margin-top: 15px;">这个 <div> 元素属于块级元素。</div>
块级元素的一些例子：
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
行内元素（inline element）
内联元素不从新行开始，仅占用所需的宽度。
<p>这是段落中的<span style="border: 3px solid #ba3537;">行内<span>元素</span>。
</p>
行内元素的一些例子：
<span>
<a>
<img>
Display: none;
display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。
默认情况下，<script> 元素使用 display: none;。
覆盖默认的 Display 值
如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。
将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。
一个常见的例子是为实现水平菜单而生成行内的 <li> 元素：
实例
li {
display: inline;
}注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。
下例将 <span> 元素显示为块元素：
实例
span {
display: block;
}下例将 <a> 元素显示为块元素：
实例
a {
display: block;
}