CSS 之 display 属性详解

display 属性是 CSS 中一个非常重要的属性之一，用于定义元素的显示类型。在网页布局中，灵活使用 display 属性可以实现各种布局效果。在本篇博客中，我们将详细介绍 display 属性的各种值以及实际应用。

display 属性的常用值

display 属性有多个常用的值，每个值都代表着不同的元素布局方式，下面我们逐一介绍这些常用的值。

block 值将元素显示为块级元素，块级元素会独占一行并且可设置宽度、高度以及内外边距等属性。常见的块级元素有 div、p、h1~h6 等。

.block-element {
  display: block;
  width: 200px;
  height: 100px;
  background-color: red;
  margin: 10px;
  padding: 20px;
}

inline 值将元素显示为行内元素，行内元素不会独占一行，宽度、高度以及内外边距等属性是不起作用的。常见的行内元素有 span、a、img 等。

.inline-element {
  display: inline;
  background-color: blue;
  margin: 10px;
  padding: 20px;
}

inline-block 值则是将元素显示为行内块元素，行内块元素的宽度、高度等属性是可以设置的，同时也可以在一行内显示多个元素。常见的行内块元素有 input、button 等。

.inline-block-element {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: green;
  margin: 10px;
  padding: 20px;
}

none 值将元素隐藏，隐藏的元素不会在页面中占据空间，也不会影响布局及其他元素。该属性常用于动态控制元素的显示与隐藏。

.none-element {
  display: none;
}

flex 值是 CSS3 引入的一种弹性盒布局，通过设置弹性容器（父元素）的 display 属性为 flex，可以实现弹性布局。弹性布局可以非常方便地实现水平和垂直居中等布局效果。

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

通过将导航菜单中的 li 元素的 display 属性设置为 inline-block，可以在一行内横向显示多个菜单项。

.nav-menu {
  display: flex;
}

.nav-menu li {
  display: inline-block;
  margin-right: 10px;
}

通过使用 flex 布局，可以实现响应式布局，使页面在不同屏幕尺寸下自适应调整布局。

.container {
  display: flex;
  flex-direction: column;

  @media screen and (min-width: 768px) {
    flex-direction: row;
  }
}

通过使用 flex 布局，可以实现水平居中和垂直居中的布局效果。

.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

总结：display 属性是 CSS 中非常重要的一个属性，通过合理设置 display 属性的值，可以实现各种布局效果。掌握和灵活运用 display 属性，可以让我们更好地控制和布局网页元素，提高网页开发效率和用户体验。

希望通过本篇博客的介绍，你对 display 属性有了更深入的了解。谢谢阅读！

参考资料：