在CSS中，display属性是一个非常重要的属性，它用于控制元素的显示方式。这个属性可以控制元素的块级或行内级别，也可以隐藏或显示元素。由于这个属性的基本操作非常简单，在实际应用中我们很少注意到它的细节。但是，当我们需要进行更精细的布局或样式控制时，display属性的使用就变得尤为重要了。下面是一些使用CSS display属性的技巧，通过掌握它们，你可以更好地控制CSS样式，做出更精细的页面效果。

1. 关于display属性的基本知识

在CSS中，常用的display属性有以下几种：

- block：将元素显示为块级元素，宽度自动填满父元素，可设置宽度、高度、内边距和外边距等属性。

- inline：将元素显示为行内元素，只占据所需的空间，不能设置宽度、高度、内边距和外边距等属性。

- inline-block：将元素显示为内联块元素，可设置宽度、高度、内边距和外边距等属性，同时不会自动换行。

- none：将元素隐藏，同时不会保留它们的占位空间。

除了以上几种基本属性，CSS中还有其他display属性的取值，例如table、table-cell、flex等等。

2. 使用inline-block布局实现水平对齐

在实际开发中，我们经常需要在一行显示多个元素，并将它们水平对齐。常见的方式是将这些元素的display属性设置为inline，并使用text-align属性将它们对齐到一行。然而，这种方式无法让元素自适应宽度，也无法设置内边距和外边距。为了解决这些问题，我们可以将元素的display属性设置为inline-block，这样它们就能够自适应宽度了，并且可以设置内边距和外边距，同时也能够水平对齐。

```

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

li {

display: inline-block;

margin-right: 10px;

padding: 10px 20px;

background-color: #eee;

}

```

在上面的例子中，我们将ul的列表项用inline-block的方式进行布局，同时设置了margin、padding和背景颜色。

3. 使用inline-block布局实现垂直对齐

除了水平对齐，我们有时还需要将多个元素垂直对齐。在这种情况下，我们可以运用display属性的垂直对齐特性，将元素的vertical-align属性设置为middle，这样它们就能够在垂直方向上对齐。

```

.container {

display: table;

width: 100%;

height: 300px;

}

.item {

display: table-cell;

vertical-align: middle;

}

.item-inner {

width: 200px;

margin: 0 auto;

padding: 10px;

background-color: #eee;

text-align: center;

}

```

在上述例子中，我们使用table和table-cell的方式布局了多个元素，使用了vertical-align属性实现了垂直对齐。同时，我们也为元素设置了宽度、内边距和外边距等样式属性。

4. 将元素居中布局

常见的布局方式中，居中是一种非常常见的需求，不论是水平居中还是垂直居中，都可以使用display属性来实现。

```

/* 水平居中 */

.container {

display: flex;

justify-content: center;

}

/* 垂直居中 */

.container {

display: flex;

align-items: center;

}

/* 水平和垂直居中 */

.container {

display: flex;

justify-content: center;

align-items: center;

}

```

使用flex布局属性的好处是，能够灵活的控制元素的布局方式，并且仅使用少量的CSS代码就可以完成。在以上代码中，我们使用flex属性实现了水平和垂直居中的布局方式。

5. 使用none隐藏元素

在一些特定的场景中，我们需要隐藏某个元素。这个时候，可以使用display属性将此元素的值设置为none，这样该元素就不会显示出来。

```

.hidden {

display: none;

}

```

在实际的开发中，我们可能会将一些元素通过JS动态的隐藏或显示出来，这时候我们就需要使用display属性来完成这个操作了。

总结

掌握display属性的使用技巧是CSS中非常重要的一步，通过灵活的运用，可以实现精细和高效的页面布局。在本文中，我们对使用inline-block进行水平对齐、垂直对齐，使用flex进行居中布局，以及使用none隐藏元素等方面进行了讲解，希望能够为大家带来帮助。同时，需要注意的是，display属性的取值有多种，应该根据不同的情况选择合适的取值方案。