在网页设计中，CSS（层叠样式表）扮演着至关重要的角色，它不仅定义了网页的视觉样式，还控制着元素的布局。CSS3引入的
display
属性，为我们提供了强大的工具，用以解锁网页布局的多样化魔法。本文将深入探讨
display
属性的不同值及其应用，帮助读者更好地掌握这一布局利器。
一、
display
属性简介
display
属性是CSS中用于定义元素显示方式的关键属性。它决定了元素在页面中的呈现形式，以及其在布局中的行为。根据不同的值，
display
属性可以使元素以行内、块级、弹性或网格等不同形式呈现。
二、常见的
display
属性值
1.
block
特点
：块级元素，独占一行，可以设置宽度和高度。
常见元素
：
,
至
,
至
,
,
-
等。
应用场景
：用于创建独立的布局单元，如导航栏、页脚等。
2.
inline
特点
：行内元素，不独占一行，与其他元素并排显示。
常见元素
：
,
,
![]()
,
,
等。
应用场景
：用于文本中的装饰性元素或链接。
3.
inline-block
特点
：行内块元素，不独占一行，但可以设置宽度和高度。
常见元素
：
![]()
,
-
,
-
等。
应用场景
：用于创建独立的布局单元，如导航栏、页脚等。
2.
inline
特点
：行内元素，不独占一行，与其他元素并排显示。
常见元素
：
,
,
,
,
等。
应用场景
：用于文本中的装饰性元素或链接。
3.
inline-block
特点
：行内块元素，不独占一行，但可以设置宽度和高度。
常见元素
：
,