# display 属性详解

URL: https://caijiao.org/css/06-position-float/01-display
Source: docs/css/06-position-float/01-display.md
Description: 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 属性示例

[在线代码演示](/css/demos/11.html)