CSS（Cascading Style Sheets） 是一种用于控制网页外观的样式表语言，通过CSS可以控制网页中HTML元素的显示样式与排版。CSS中的display属性是控制元素显示方式的重要属性之一。本文将介绍CSS中常用的display属性及其应用实例。

一、display属性简介

display属性用于控制HTML元素在网页中的显示方式。例如，有时候我们需要将某些元素隐藏起来，有时候又需要将隐藏的元素显示出来。display属性可以实现这个功能。display属性有多个属性值，每个值都代表了不同的显示方式，常见的属性值有以下几种：

1. block

block值是display属性的默认属性值，也是常见的属性值之一。它使得元素在网页中呈现为块级元素，即占满整行，例如div、p标签都是块级元素。块级元素可以设置宽度和高度，而且默认情况下宽度会占据父元素的全部空间。

2. none

none值用于隐藏某个元素，将元素隐藏后，该元素在页面中的位置也会被释放，其他元素会自动向上移动填补该元素的位置。none值也是默认值之一。

3. inline

inline值将元素呈现为行内元素，与块级元素相反，行内元素默认情况下不会独占一行，而是按照旧有排版方式排列。例如， a、span标签都是行内元素。

4. inline-block

inline-block值将元素呈现为行内块状元素，具有行内元素的特点，但是可以设置宽度和高度。

5. table

table值将元素呈现为表格元素，对应的标签为table、tr、th、td等。

6. flex

flex值是CSS3中新增的属性值，它用于支持弹性盒子布局（flexbox）。设置该值后，元素会按照既定规则排列。

二、display属性实例

下面分别展示一些常用元素对应的display属性取值及其作用。

1. div

div是网页布局中非常重要的元素之一，它被用于进行网页布局。通常，我们将div设置为块状元素，以便在网页中占据整行。以下是div的样式代码：

```

div{

display:block;

width: 100%;

}

```

2. span

span标签是行内元素，在网页中通常被用于设置文本的样式，例如设置字体颜色、字体大小等。以下是span的样式代码：

```

span{

display:inline;

font-size: 14px;

color: #333;

}

```

3. table

表格元素在网页中也比较常见，它可以用于展示数据、调整布局等。通常，我们将表格元素设置为表格元素（table），以下是table的样式代码：

```

table{

display:table;

border-collapse: collapse;

}

```

4. img

图片元素通常也需要进行样式调整，例如将图片居中、设置宽度等等。以下是img的样式代码：

```

img{

display:block;

margin: 0 auto;

max-width: 100%;

}

```

5. button

按钮元素在网页中也经常使用，可以用于提交表单、触发点击事件等等。以下是button的样式代码：

```

button{

display:inline-block;

padding: 10px;

background-color: #333;

color: #fff;

border: none;

}

```

6. ul和li

列表元素通常也需要进行样式调整，例如设置列表样式、设置间距等等。以下是ul和li的样式代码：

```

ul{

display:block;

list-style-type: none;

margin-left: 0;

padding-left: 0;

}

li{

display: block;

margin-bottom: 10px;

padding: 10px;

background-color: #f5f5f5;

}

```

三、结语

以上就是。通过对display属性的熟练应用，可以在网页中实现丰富多彩的布局效果，为用户带来更好的浏览体验。