在display属性是用于控制布局中最重要的CSS属性。
显示属性
在display属性指定一个元素是否/如何显示。
每个HTML元素具有取决于它是什么类型的元件的默认显示值。 对于大多数元素的默认显示值是block或inline 。
单击显示面板
此面板包含一个<div>元素，它在默认情况下（隐藏display: none ）。
它是风格与CSS，而我们使用JavaScript来显示它（将其更改为（ display: block ）。
块级元素
块级元素总是开始于一个新行，占用全部可用宽度（伸出来的左，右，只要它可以）。
块级元素的例子：
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
内联元素
内联元素没有开始一个新行，只需要尽可能多的宽度是必要的。
这是一个内嵌<span>元素的段落内 。
内联元素的例子：
- <span>
- <a>
- <img>
显示：无;
display: none;一般用JavaScript来隐藏和显示而不删除并重新创建这些元素。 看看我们的最后一个例子在此页面上，如果你想知道如何可以做到这一点。
在<script>元素中使用display: none;作为其默认。
覆盖默认的显示值
正如前面提到的，每一个元素都有一个默认的显示值。 但是，您可以覆盖。
改变一个内联元素块元素，反之亦然，可以为使页面看起来特定的方式，仍然遵循Web标准是有用的。
一个常见的例子是使内联<li>水平菜单元素：
 | 注意：设置元素的显示属性只改变元素的显示方式 ，而不是哪一种元素是。所以，用一个内联元素display: block;不允许在它里面其他的块级元素。 |
|---|
下面的例子显示<SPAN>元素块元素：
隐藏的元素- display:none或visibility:hidden ？
隐藏一个元素可以通过设置来完成display属性设置为none 。 该元素会被隐藏，并且页面将显示为如果元素不存在：
visibility:hidden;还隐藏的元素。
然而，该元件仍然会占用相同的空间之前。 该元素会被隐藏，但仍然影响布局：
更多示例
display: none;与visibility: hidden;
这个例子说明display: none;与visibility: hidden;
配合使用CSS用JavaScript来显示内容
这个例子演示了如何使用CSS和JavaScript来显示在点击的元素。
自测练习用！
CSS显示/能见度属性
| 属性 | 描述 |
|---|---|
| display | 指定的元件应该如何显示 |
| visibility | 指定一个元素是否应该是不可见 |