了解CSS计数器，图形元素以及如何将两者结合起来，以便在网页中自动编号。

在撰写文章，博客文章，教程，杂志条目或任何其他内容时，您通常需要包含一些图片，图表，照片甚至视频和代码片段来说明您的内容。

话虽如此，你很可能会想要给这些元素添加一些标题，也许给他们编号，这样你的读者就可以跟踪你的想法。

这正是我们今天的教程要做的事情：将<figure>元素的用法与CSS计数器结合起来，让插入的元素（特别是图片）变得性感！

数字元素

<figure>元素旨在与<figcaption>元素一起使用来标记图像，插图，照片，图表和代码片段等等。这是规范说这个元素的内容：

数字元素代表内容单元，可选地带有标题，它是自包含的，通常从文档的主流程中被引用为单个单元，并且可以从文档的主流程移动而不需要影响文件的含义。

W3C规范

这是一个数字的基本标记：

<figure>

<img src="path/to/your/image.jpg" alt="" />

<figcaption>Here is the legend for your image<figcaption>

</figure>

这里有一些关于数字元素的注释：

<figcaption>元素是可选的

在<figure>元素中只能有一个<figcaption>元素

您可以在<figure>元素中嵌入尽可能多的其他元素

处理图像时，如果包含<figcaption>，则可以将alt属性留空，以防止屏幕阅读器读取两次相同的内容

有关<figure>元素的更多信息，我建议你 从HTML5Doctor这个伟大的文章。Mozilla开发者网络也有 这个条目 ，当然 还有官方的规范。

例子

例如，如果你想显示一段代码，你可以用<figure>元素这样做：

<figure>

<code>body { background: white; }</code>

<figcaption>Some illustrated code with figure<figcaption>

</figure>

基本上，而不是像这样添加你的图片：

<img src="cute-kitty.jpg" alt="This is a cute kitty!" />

...你可以做这样的事情：

<figure>

<img src="cute-kitty.jpg" alt="" />

<figcaption>This is a cute kitty!<figcaption>

<figure>

浏览器支持

<figure>是“新”HTML5元素的一部分，包括Internet Explorer 8在内的一系列旧浏览器无法理解。由于本教程不希望使布局爆炸，所以我建议您包括一个polyfill来支持这些元素。

HTML中最常用和最常用的polyfill是html5shiv ，您可以直接从Google CDN中嵌入html5shiv，方法 是 将以下行添加到文件中：

<!--[if IE lte 8]>

<script src=""></script>

<![endif]-->

请注意，我们如何使用特定于IE的条件注释来阻止其他浏览器和大于8的IE版本加载此脚本。

如果你想知道html5shiv polyfill背后的故事，请阅读 来自Paul Irish的这篇精彩的博客文章。

CSS计数器

CSS计数器必须是整个属性中最为未知的CSS属性之一。它仅通过CSS就可以自动编号，而不需要HTML或JavaScript的帮助。

这个模块依赖于两个属性和一个值：

反复位用于初始化和重置一个或多个计数器

反增量用于增加一个或多个计数器

counter（）是一个有效的:: before和::之后的伪元素，接受一个计数器名作为参数以显示其值

挺直的，不是吗？基本上，你初始化一个你想要的值（大多数为0）的名称的计数器，并告诉给定的选择器在每次出现时递增该计数器。然后可以使用CSS生成的内容显示此计数器，可以使用：before和：after伪元素指定样式和位置。

CSS计数器的最基本的实现必须是这样的：

/* 1. We initialize the counter */

body {

counter-reset: myAwesomeCounter;

}

/* 2. We tell each occurrence of this element to increment the counter */

.myAwesomeElement {

counter-increment: myAwesomeCounter;

}

/* 3. We display the value of the counter before the element */

.myAwesomeElement:before {

content: counter(myAwesomeCounter);

}

注意：当我说“2个属性和1个值”时，我说谎了，还有一个counter（）值几乎从不使用。 关于它的更多信息，请参阅 MDN中的这个条目。

例

回到我们的案子，我们呢？我们想为我们的图像编号，以便它们的前缀为“Fig。1 - ...“，”图。2 - ...“等等，对吧？让我们简单地做。

.article {

counter-reset: figures;

}

.figure {

counter-increment: figures;

}

.figure figcaption:before {

content: 'Fig. ' counter(figures) ' - ';

}

这3行CSS足以自动编号。这不是很棒吗？

包装一切

基础

现在我们知道如何使用<figure>元素和CSS计数器，现在是时候做出我们想做的事情：修饰我们的博客文章。

但是在跳入代码之前，如果我们可以轻松地创建浮动或居中的数字，只要添加一个简单的类就不是很酷吗？当然，这将是。我们开工吧！

我们将开始给我们的数字一些体面的风格。没有什么花哨的东西，简单而优雅，足以让你的图像形成一种框架。

.figure {

padding: 0.9em;

border: 3px solid #f5bca8;

background: #fff;

margin: 0 auto 1em;

}

为了使图像水平居中并防止它们从容器（<figure>元素）中脱离，我们需要向它们添加一些规则（也可以是<video>或其他）。

.figure img {

margin: 0 auto;

display: block;

max-width: 100%;

}

现在的标题！我们让它脱颖而出，改变排版并横向居中。但坦率地说，造型取决于你。只要记住一个标题应该被删除没有太多的麻烦，所以不要写一个文本墙。

.figure figcaption {

font-weight: 700;

text-transform: uppercase;

letter-spacing: 2px;

font-size: 0.8em;

padding: .5em;

text-align: center;

color: #fff;

background: #f5bca8;

}

编号

太好了，我们还没有实施柜台来对我们的数字进行编号。正如我们在上一节中看到的那样，这很容易做到。

.article {

counter-reset: figures;

}

.figure figcaption {

counter-increment: figures;

}

.figure figcaption:before {

content: 'Fig. ' counter(figures) ' - ';

}

如果您不一定要为图片编号，则可以将其限制为父元素上给定的类。也许你会给你的包装一个.numbered-figures类，以便它使图像编号。足够简单：

.numbered-figures { counter-reset: figures; }

.numbered-figures .figure figcaption { counter-increment: figures; }

.numbered-figures .figure figcaption:before { content: 'Fig. ' counter(figures) ' - '; }

变化

我们已经掌握了系统的基础知识，但是我们还没有设置一个在页面上浮动的数字。然后，我们将做两个类：

.figure-left {

float: left;

margin: 0 1em .5em 0;

width: -webkit-min-content;

width: -moz-min-content;

width: min-content;

}

.figure-right {

float: right;

margin: 0 0 .5em 1em;

width: -webkit-min-content;

width: -moz-min-content;

width: min-content;

}

对于那些不知道最小内容的人来说，它是一个有效的宽度，最小宽度，最大宽度，高度，最小高度和最大高度值，其他属性包括柔性框和网格布局。

在我们的情况下，我们希望图形元素尽可能小; 基本上，我们希望它环绕图像。因为<figure>是块级元素，所以它拉伸到其父级的宽度（100％）。我们可以将它设置为float：left或display：inline-block，使其折叠成最宽的内容，但是如果标题比图像更宽，我们就会遇到问题。

我们可以根据图像硬编码宽度到数字元素，但是它是不灵活和不响应的。这就是为什么我们引入最小内容价值。简单来说，它会告诉<figure>元素减少其宽度，这样即使标题必须包装，图像也能完美地适合它。

Firefox 3+支持此值，前缀为-moz-，Chrome 18+支持前缀为-webkit-。目前没有任何浏览器支持前缀，但可能在将来，所以我们离开它。

不支持的浏览器的行为如预期：没有设置宽度，浮动的<figure>元素包围最宽的元素，图像或标题。

注意：还有其他值类似于最小内容，如max-content，fit-content和available。有关这些信息的更多信息，请参阅 MDN的此条目 或者CSS内部和外部模块级别3的工作草案 。

最后但并非最不重要，我们需要更改/删除浮动数字图像上的最大宽度值。要么图像有自己的大小，你需要设置最大宽度为无，或者你想设置一个最大宽度（我建议），你可以定义任何你想要的：

.figure-right img,

.figure-left img {

max-width: 300px; /* Adjust to suit your needs */

}

小屏幕

为了确保浮动图形在小屏幕上不会出现奇怪的现象，我们需要重写一些样式来使它们成为全角和居中。如果你使用移动的第一种方法建立你的网站，你会以另一种方式来做，但是这并不重要。

@media (max-width: 767px) {

.figure-left,

.figure-right {

float: none;

margin: 0 0 1em 0;

width: 100%;

}

.figure img {

max-width: 100%;

}

}

用法

使用这个很容易。要么你想要一个水平居中的数字，在这种情况下，你只需要使用.figure类。或者 - 很可能 - 您想要将图形左右浮动，在这种情况下，您必须同时使用.figure类和变体类（例如.figure-left）。

<figure class='figure'>

<img src="path/to/your/image.jpg" alt="" />

<figcaption>Here is the legend for your image<figcaption>

</figure>

<figure class='figure figure-left'>

<img src="path/to/your/image.jpg" alt="" />

<figcaption>Here is the legend for your image<figcaption>

</figure>

<figure class='figure figure-right'>

<img src="path/to/your/image.jpg" alt="" />

<figcaption>Here is the legend for your image<figcaption>

</figure>

最后的话

这几乎是他们，唯一要做的就是在你的网站上实现这一点。请看看相关的 演示 ，看看它的样子，或者在我自己的网站上看到它 。

感谢阅读和快乐的编码！