CSS中的display属性是网页设计中不可或缺的一个属性，它用于控制元素的显示方式，本文将详细介绍display属性的用法，帮助大家更好地理解和运用这一属性。
display属性用于设置元素的显示类型，包括内联元素、块级元素、列表项等，它有多种取值，下面我们就来一一讲解。
1. display的常见取值
inline
inline是display的一个基本值，它表示元素为内联元素，内联元素的特点是宽度由内容决定，不会独占一行，多个内联元素可以在一行内显示。
将<div>元素设置为内联元素：
div {
display: inline;
}block
block表示元素为块级元素，块级元素会独占一行，宽度默认为父元素的100%，常见的块级元素有<div>、<p>、<h1>~<h6>等。
将<span>元素设置为块级元素：
span {
display: block;
}inline-block
inline-block是内联块级元素，它结合了内联元素和块级元素的特点，宽度由内容决定，但可以设置宽度和高度。
将<img>元素设置为内联块级元素：
img {
display: inline-block;
}none
none表示元素不显示，且不会占据页面空间，这个值常用于隐藏元素。
隐藏一个<div>元素：
div {
display: none;
}2. display的其他取值
除了以上常见取值，display还有以下几种取值：
list-item
list-item表示元素作为列表项显示，通常与list-style-type、list-style-position、list-style-image等属性配合使用。
li {
display: list-item;
}table
table表示元素以表格形式显示，它可以与border-collapse、table-layout等属性配合使用。
将<div>元素设置为表格：
div {
display: table;
}table-cell
table-cell表示元素作为表格单元格显示，常用于垂直居中。
将<div>元素设置为表格单元格：
div {
display: table-cell;
}flex
flex是CSS3中新增的布局方式，表示元素为弹性容器，它允许开发者更轻松地实现复杂的布局。
将<div>元素设置为弹性容器：
div {
display: flex;
}3. display的实际应用
下面我们来介绍一些display属性在实际开发中的应用。
隐藏元素
使用display: none;可以隐藏元素，而不会影响布局，这在切换显示和隐藏内容时非常有用。
清除浮动
当父元素没有设置高度时，子元素浮动可能导致父元素高度塌陷，这时，我们可以给父元素添加display: table;属性，以清除浮动。
.parent {
display: table;
}垂直居中
使用display: table-cell;和vertical-align: middle;可以实现单行或多行文本的垂直居中。
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}弹性布局
利用display: flex;可以轻松实现各种布局效果，如水平垂直居中、等高布局等。
.parent {
display: flex;
justify-content: center;
align-items: center;
}4. 与拓展
display属性在CSS中具有非常重要的地位，掌握它的用法可以让我们在网页布局方面更加得心应手，在实际开发中，我们可以根据需求灵活运用display的取值，实现各种布局效果。
随着CSS3的普及，display属性还新增了许多有趣的取值，如grid（网格布局）、ruby（注释布局）等，这些新的布局方式值得我们进一步学习和探索。
通过以上介绍，相信大家对display属性有了更深入的了解，在实际应用中，多尝试、多思考，相信大家能更好地掌握这一属性，让网页布局更加美观、实用。