CSS 布局 - display 属性

CSS 中 display 属性设置元素是否显示以及元素的显示方式，是控制布局的最重要的 CSS 属性。

默认情况下，大多数 HTML 元素属于块元素和内联元素。块元素的显示方式为 block, 内联元素的显示方式为 inline。通过 display 属性我们可以改变元素的显示方式，让块元素表现为内联元素或者让内联元素表现为块元素，在或者让元素表现为“内联块元素”。

块级元素

块级元素总是从新行开始并占据整个可用宽度。块级元素示例：

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

内联元素

内联元素不会从新行开始，只会占用必要的宽度。内联元素示例：

<span>
<a>
<img>

修改元素的显示方式

特定的场景下，将块元素显示为内联元素，对页面的布局很有用。

通过 <li> 制作水平导航菜单：

li {
  display: inline;
}

!! 设置元素的 display 属性只会改变元素的显示方式，而不是它是什么类型的元素。块元素始终块元素，只是像内联元素那样显示而已。

`display: none;`

通过 display: none; 可以将元素隐藏起来。

鼠标悬停提示案例

<!DOCTYPE html>
<html>
  <style>
    button {
      cursor: pointer;
    }
    button span.hover {
      display: none;
    }
    button:hover span.hover {
      display: inline;
    }
  </style>
  <body>
    <button>我是按钮 <span class="hover">鼠标在我上面了</span></button>
  </body>
</html>

隐藏元素 - `display:none` vs `visibility:hidden`

display:none

隐藏一个元素。元素隐藏后，就像元素没在 HTML 文档出现过一样，不会占用页面的任何空间。
visibility:hidden

隐藏一个元素。元素隐藏后，仍将占用与以前相同的空间，仍然影响布局。

display:none vs visibility:hidden 区别：

<!DOCTYPE html>
<html>
  <style>
    #display:hover ~ p.p1 {
      display: none;
    }
    #visibility:hover ~ p.p1 {
      visibility: hidden;
    }
  </style>
  <body>
    <button id="display">display:none</button>
    <button id="visibility">visibility:hidden</button>
    <p class="p1">Hello World!</p>
    <p></p>
    <p>Hello CSS!</p>
    <p></p>
  </body>
</html>

inline-block

内联元素在水平布局上有很有优势，但是内联元素不能设置宽度和高度，不能设置上下的内边距和外边距，这又带来了很多不便。

而显示方式为 inline-block 的元素则结合了块元素和内联元素的优点，即能水平排列，有可以设置宽度、高度和内外边距。

在制作水平导航菜单的时候经常用到 display: inline-block 。

使用 inline-block 创建导航链接

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

CSS 显示/可见性属性

属性	说明
`display`	设置元素是如何显示的
`visibility`	设置原始是否显示