display属性用于控制元素在页面中的显示方式。这个属性的取值非常多，常用的有：
block：将元素呈现为块级元素，即在页面上单独占据一行，并且可以设置宽度、高度和内边距和外边距等属性。常用于需要占据一行的元素，比如段落、标题等。
inline：将元素呈现为行内元素，即元素只占据它所在的行的空间，不能设置宽度、高度和内边距和外边距等属性。常用于需要在同一行显示的元素，比如超链接、图片等。
inline-block：将元素呈现为行内块级元素，即元素可以设置宽度、高度和内边距和外边距等属性，同时不会独占一行。常用于需要在同一行显示且具有宽度和高度的元素，比如按钮、输入框等。
none：将元素从页面中删除，元素不会被渲染出来。常用于控制元素在页面中的显示和隐藏。
除了以上常用的取值，display属性还有其他一些取值，如flex、grid等，它们用于控制元素的布局和排列。
以下是一个示例，展示如何使用display属性将元素呈现为块级元素：
HTML代码：
<div>
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel felis felis. Fusce in quam non erat rutrum blandit. Nulla fringilla odio eget sapien fermentum, a lobortis mauris semper. Nam lobortis, mauris eu pellentesque gravida, libero leo congue mauris, sit amet dictum urna justo sit amet nunc. Etiam ut lorem non magna imperdiet vestibulum.</p>
</div>
CSS代码：
div {
display: block;
background-color: gray;
padding: 20px;
}
在这个例子中，我们将<div>元素的display属性设置为block，这意味着该元素将呈现为块级元素，并在页面上单独占据一行。我们还设置了该元素的背景颜色和内边距，以便更好地显示元素的边界和内容。
以下是一些使用display属性的示例：
将元素设置为块级元素：
HTML代码：
CSS代码：
p {
display: block;
background-color: gray;
color: white;
padding: 20px;
}
在这个例子中，我们将<p>元素的display属性设置为block，这将使其呈现为块级元素。我们还设置了背景颜色、文字颜色和内边距，以便更好地显示元素的边界和内容。
将元素设置为行内元素：
HTML代码：
<div>
<p>Hello World!</p>
<a href="#">Read More</a>
</div>
CSS代码：
p {
display: inline;
}a {
display: inline;
background-color: gray;
color: white;
padding: 10px;
text-decoration: none;
}
在这个例子中，我们将<p>元素和<a>元素的display属性都设置为inline，这将使它们呈现为行内元素。我们还设置了<a>元素的背景颜色、文字颜色、内边距和文本修饰，以便更好地显示元素的样式和内容。
将元素设置为行内块级元素：
HTML代码：
<div>
<span>Hello World!</span>
<button>Click Me!</button>
</div>
CSS代码：
span {
display: inline-block;
background-color: gray;
color: white;
padding: 10px;
}button {
display: inline-block;
background-color: blue;
color: white;
padding: 10px;
border: none;
}
在这个例子中，我们将<span>元素和<button>元素的display属性都设置为inline-block，这将使它们呈现为行内块级元素。我们还设置了它们的背景颜色、文字颜色和内边距，以便更好地显示元素的样式和内容。