display 属性是用于控制布局的最重要的 CSS 属性，规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
一、块级元素
块级元素（block element）总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。这个 <div> 元素属于块级元素。块级元素的一些例子：
<div> <h1> - <h6> <p> <form> <header> <footer> <section>
二、行内元素
内联元素（inline element）不从新行开始，仅占用所需的宽度。这是段落中的行内 <span> 元素。
行内元素的一些例子：
- <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;
}
五、隐藏元素
display:none 还是 visibility:hidden？
通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中：
h1.hidden {
display: none;
}
visibility:hidden; 也可以隐藏元素，但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：
h1.hidden {
visibility: hidden;
}
六、CSS Display/Visibility属性
