display 属性详解

CSS 的 display 属性定义元素的显示类型，影响元素如何参与布局和渲染。

常见的 display 类型

1. block（块级元素）

占据一整行，宽度默认撑满父元素。
可以设置宽高、内外边距。
常见元素：<div>, <p>, <h1>-<h6> 等。

css

display: block;

2. inline（内联元素）

不会换行，宽高由内容决定。
不能设置宽高，只有内边距和边框影响布局。
常见元素：<span>, <a>, <strong> 等。

css

display: inline;

3. inline-block（内联块）

结合了 block 和 inline 特性。
可以设置宽高，但不会独占一行。
常用于排列表单控件或按钮。

css

display: inline-block;

4. none（隐藏元素）

元素不显示，也不占据空间。

css

display: none;

5. flex（弹性盒子）

使元素成为弹性容器，方便实现复杂布局。
子元素可灵活排列和伸缩。

css

display: flex;

6. grid（网格布局）

创建二维网格布局，管理行列。

css

display: grid;

display 属性示例

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。