HTML Dog
跳至导航

Display

操作 HTML 元素的一个关键技巧是理解大多数元素的工作方式并没有什么特别之处。大多数页面都可以只用少数几个标签构成，而这些标签可以按照您选择的任何方式进行样式设置。浏览器对大多数 HTML 元素的默认视觉呈现方式包括各种字体样式、外边距、内边距以及本质上的 **显示类型**。

最基本的显示类型是 **inline**（内联）、**block**（块级）和 **none**（无），它们可以通过 `display` 属性以及令人惊讶的 `inline`、`block` 和 `none` 值进行操作。

内联

`inline` 的作用正如其名——内联显示的框遵循行的流动。链接（``）和强调（``）等元素默认就是内联显示的。

内联框。

例如，下面的代码将使列表中的所有列表项彼此相邻显示在一行中，而不是每个列表项独占一行。


li { display: inline }

块级

`block` 使一个框独立存在，占据其容器框的全部宽度，并在其前后有效地添加了换行符。与内联框不同，块级框允许对高度、外边距和内边距进行更大的操作。标题和段落元素等就是浏览器中默认以这种方式显示的元素。

块级框。

下一个示例将使“nav”中的所有链接变成大而可点击的块。


#navigation a {
    display: block;
    padding: 20px 10px;
}

无

`none`，嗯，根本不显示框，这听起来可能没什么用，但可以很好地用于动态效果，例如在点击链接时打开或关闭扩展信息，或在备用样式表中。

例如，下面的代码可以在打印样式表中用来基本“关闭”导航等元素的显示，这些元素在打印时可能毫无用处。


#navigation, #related_links { display: none }

表格

好的。以上就是基础知识。现在来看一些稍微高级且不常用的内容……

也许理解与表格相关的 `display` 属性值的最好方法是想想 HTML 表格。`table` 是初始显示值，您可以使用 `table-row` 和 `table-cell` 属性值分别模仿 `tr` 和 `td` 元素。

`display` 属性还提供了 `table-column`、`table-row-group`、`table-column-group`、`table-header-group`、`table-footer-group` 和 `table-caption` 等值，这些值都相当直观。这些值的直接好处是，您可以按列构建表格，而不是像 HTML 中那样按行进行。

最后，`inline-table` 值基本上是在表格前后都不添加换行符。

其他显示类型

`list-item` 以您通常期望 `li` HTML 元素显示的方式显示一个框。为了正常工作，以这种方式显示的元素应该嵌套在 `ul` 或 `ol` 元素中。

`run-in` 会使一个框根据其父级的显示方式，成为内联或块级。