在CSS中，`display` 特色用于设置元素应该生成的框的类型。每个元素都有一个默许的 `display` 值，这取决于元素的类型。例如，`div` 元素的默许 `display` 值是 `block`，而 `span` 元素的默许 `display` 值是 `inline`。

`display` 特色的值有许多，但其间一些是最常用的，包含：

`block`：元素将生成一个块级框，它将占有其父元素的一切可用空间（除非设置了宽度），而且在其前后生成换行符。 `inline`：元素将生成一个行内框，它将与其他行内元素一同坐落同一行上，而且不会在其前后生成换行符。 `inlineblock`：元素将生成一个行内块级框，它将与其他行内元素一同坐落同一行上，可是它能够像块级元素相同设置宽度和高度。 `none`：元素将不会生成任何框，它不会占有任何空间，也不会影响其他元素的方位。 `flex`：元素将生成一个弹性框，它将答应其子元素在水平缓笔直方向上进行灵敏的布局。 `grid`：元素将生成一个网格框，它将答应其子元素在网格上进行布局。

`display` 特色的值还能够是 `table`、`tablerow`、`tablecell`、`tablecaption`、`listitem`、`runin`、`compact`、`marker`、`ruby`、`rubybase`、`rubytext`、`rubybasegroup`、`rubytextgroup`、`inlinetable`、`tablerowgroup`、`tableheadergroup`、`tablefootergroup`、`tablecolumngroup`、`tablecolumn`、`tablecell`、`tablecaption`、`flex`、`inlineflex`、`grid`、`inlinegrid`、`flowroot`、`subgrid`、`content`、`none`、`initial`、`inherit`、`unset` 等。

挑选正确的 `display` 值关于创立有用的布局和结构是非常重要的。

CSS中的display特色详解

在CSS（层叠款式表）中，`display`特色是一个非常重要的特色，它决议了HTML元素的显现类型和布局方法。正确运用`display`特色关于完成网页的布局和款式规划至关重要。本文将具体介绍`display`特色的相关常识，协助读者更好地了解和运用这一特色。

display特色的基本概念

`display`特色用于界说HTML元素的显现类型，它能够将元素设置为块级元素、行内元素、行内块级元素等。不同的显现类型会影响元素的布局和款式体现。

块级元素

块级元素（Block-level element）会独占一行，而且能够设置宽度和高度。常见的块级元素包含：

- ``：用于布局的容器元素。

- `` - ``：标题元素。

- ``：阶段元素。

- ``：表单元素。

- ``：章节元素。

- ``：文章元素。

行内元素

行内元素（Inline element）不会独占一行，它只会占有内容所需的空间。行内元素不支撑设置宽度和高度，也不能运用`margin-top`和`margin-bottom`。常见的行内元素包含：

- ``：用于文本的包裹。

- ``：超链接元素。

- ``：加粗文本。

- ``：着重文本。

行内块级元素

行内块级元素（Inline-block element）是块级元素和行内元素的结合体。它不换行，但能够设置宽度和高度，一起支撑`margin`、`padding`等特色。常见的行内块级元素包含：

- ``：图片元素。

- ``：表单输入元素。

display特色的值

- `block`：将元素设置为块级元素。

- `inline`：将元素设置为行内元素。

- `inline-block`：将元素设置为行内块级元素。

- `none`：躲藏元素，不占有任何空间。

- `flex`：将元素设置为弹性盒子模型。

- `grid`：将元素设置为网格布局。

display特色的运用

块级元素的运用

- 运用``元素创立一个布局容器。

- 运用`` - ``元素创立标题。

- 运用``元素创立阶段。

行内元素的运用

- 运用``元素对文本进行款式润饰。

- 运用``元素创立超链接。

行内块级元素的运用

- 运用``元素刺进图片。

- 运用``元素创立表单输入。

display特色的留意事项

在运用`display`特色时，需求留意以下几点：

- `display`特色只能改动元素的显现类型，而不能改动元素的实质。

- 当将行内元素设置为块级元素时，元素会承继块级元素的特色。

- 当将块级元素设置为行内元素时，元素会承继行内元素的特色。

`display`特色是CSS中一个非常重要的特色，它决议了HTML元素的显现类型和布局方法。经过合理运用`display`特色，咱们能够完成各种网页布局和款式规划。本文对`display`特色进行了具体的介绍，期望对读者有所协助。

未经允许不得转载：全栈博客园 » css中display特色, display特色的基本概念