CSS 布局 - display 属性

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

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 设置原始是否显示