CSS display属性的用法详解

CSS display属性是CSS的一个重要属性之一，它决定了一个元素应该生成什么类型的框。在CSS中，默认情况下，每个元素都是以某种框类型进行显示的。在这篇文章中，我们将从多个方面对CSS display属性的用法进行详细的阐述。

一、块级元素与行内元素

在CSS中，元素被分为块级元素和行内元素两种。css中每个元素都有display属性，这个属性指定了元素的类型。最基本的是块元素(block)和行内元素(inline)。

块级元素的特点是:

• 会新起一行，一般占满父容器的宽度
• 可以设置宽高，边距、内边距等样式，也可以嵌套其他元素
• 默认情况下，块元素会将其前后元素都隔开一定的距离，可以使用margin属性进行微调

与块级元素不同的是，行内元素的特点是:

• 不会新起一行，水平方向排列，宽度由内容撑开；
• 设置宽高、内外边距，vertical-align属性、box-shadow等样式不会影响它们的布局；
• 不能嵌套块状元素，只能包含数据和其它行内元素。

示例代码：

.block {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 20px;
}

.inline {
  display: inline;
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-right: 20px;
}

二、行内块级元素

在CSS中，还有一种元素类型就是行内块级元素(inline-block)。行内块级元素与行内元素的布局方式相同，但可以设置宽度和高度等样式属性。行内块级元素最常见的应用是实现文本和图片的水平居中。

行内块级元素的特点是:

• 水平方向排列，宽度由内容撑开，高度也可以设置。
• 可以设置边框、背景、内边距等样式属性。
• 可以添加上下内边距（padding）和左右边距（margin），但需要注意它们之间的间隔(px)会影响行内块元素在父容器中的布局。

示例代码：

.inline-block {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: 20px;
  vertical-align: middle;
}

三、none和inherit属性

CSS display属性还有两个特殊的值，一个是none，另一个是inherit。

none是display的默认值，表示元素不会被呈现出来，对应的元素就好像不存在一样。使用none时，元素不占据任何空间，它们失去了在文档流中的位置。这个属性在特殊情况下很有用，比如隐藏一些元素。

inherit表示继承其父元素的display属性。如果一个元素的display属性设置为inherit，则它会继承自己的父容器的display属性值。这样可以让元素在不同父元素下面有相同的布局效果。

示例代码：

.hide {
  display: none;
}

.parent {
  display: flex;
}

.child {
  display: inherit;
}

总结

CSS display属性有着非常广泛的应用。通过使用不同的display值，我们可以改变元素的布局方式，使其适应不同的布局需求。在实际开发中，需要根据页面需求和实际情况灵活运用display属性，以达到良好的用户体验。