html中display的用法 css显示属性display的8种取值

display属性在html和css中有8种用法：1. inline：行内元素，不独占行，宽高无效。2. block：块级元素，独占行，宽高有效。3. inline-block：结合inline和block特点。4. none：隐藏元素，不占空间。5. flex：启用flexbox布局。6. grid：启用网格布局。7. table：模拟表格布局。8. list-item：表现为列表项。

在HTML和CSS的世界里，display属性就像一个魔术师，它能让你的网页元素以各种方式展现自己。今天我们要聊聊这个魔术师的8种变身技巧，也就是display属性的8种取值。准备好见识一下这个魔术了吗？

首先要回答的问题是：display属性在HTML和CSS中有哪些用法？display属性定义了一个元素的显示类型，它决定了元素在网页布局中的行为方式。以下是display属性的8种取值，每一种都有其独特的用途和效果：

1. inline：让元素表现得像一个行内元素，不会另起一行，宽高设置无效。
2. block：让元素表现得像一个块级元素，会独占一行，宽高设置有效。
3. inline-block：结合了inline和block的特点，可以设置宽高但不独占一行。
4. none：隐藏元素，不占用空间。
5. flex：启用Flexbox布局，使元素成为一个弹性容器。
6. grid：启用网格布局，使元素成为一个网格容器。
7. table：让元素表现得像一个表格。
8. list-item：让元素表现得像一个列表项。

现在，让我们深入探讨一下这些取值的具体用法和场景。

立即学习“前端免费学习笔记（深入）”；

对于inline，你可以把它想象成一个害羞的小朋友，它总是喜欢和别人挤在一起，不会独占一行。比如说，你想让一个元素和其他文本共处一行，就可以这样做：

<span>这是一个行内元素</span>

但是，如果你想让一个

<div>这是一个块级元素</div>

<div>这是一个行内块级元素</div>

<div>这是一个隐藏的元素</div>

<div>
<div></div>
<div></div>
<div></div>
</div>

<div>
<div></div>
<div></div>
<div></div>
</div>

<div>
<div>
<div>单元格1</div>
<div>单元格2</div>
</div>
</div>

<div>这是一个列表项</div>