css中display的属性值

在CSS中，我们经常需要用到display属性来控制元素的显示方式。display属性的取值有很多种，今天我们来介绍一下其中常用的几种取值。

/* display: block */
p {
  display: block;
} 

block是display属性的默认值，将元素显示为块级元素，即每个元素都独占一行，可以设置宽度、高度、内边距和外边距等属性。

/* display: inline */
span {
  display: inline;
} 

inline将元素显示为行内元素，即元素在一行内排列，不能设置宽度、高度、上下内边距和上下外边距，但可以设置左右边距。

/* display: inline-block */
img {
  display: inline-block;
} 

inline-block将元素既显示为行内元素又具有块级元素的特性，可以设置宽度、高度、内边距和外边距等属性。

/* display: none */
div {
  display: none;
} 

none将元素隐藏，元素不占据空间，用户看不到，也无法与它交互。

/* display: flex */
.container {
  display: flex;
} 

flex用于设置弹性布局，即通过指定父元素的属性为flex，控制子元素的排列方式。可以设置justify-content、align-items等属性，非常灵活。

以上就是display属性的几种常用取值。掌握好这些取值，可以让我们更加熟练的掌握CSS的使用技巧，提高开发效率。