CSS进阶（3）——深入理解content

盒尺寸由内到外为：content，padding，border，margin。

本章对CSS world中第四章4.1节的内容做了一些总结和舍弃，从实用的角度深入探讨content属性。

1.什么是替换元素

在了解content之前，我们需要掌握CSS中一种常见的元素——替换元素。替换元素是“内容（content）可以被替换”的元素，常见的有“input”、“img”、“iframe”、“video”等。以图片为例 《img src="1.png" /》我们只需要将src的图片替换掉，元素的内容就会发生改变，因此，内容可替换是替换元素的基本特性之一。除了内容可替换，替换元素还有如下特性。

（1） 基本样式改不动 ，原文描述“内容的外观不受页面上CSS的影响”个人觉得有些不妥。什么是基本样式，依旧以图片为例，你可以通过src替换图片，但你不能通过CSS把图片上的“一个男人”变成“一个女人”。有些时候，这为我们带来了方便，如最基本的替换元素：《input type="text"/》你可以通过CSS修改他的边框，字体等属性，但他的基本样式，如光标提示，可输入区域等，就是你改不动的，因为如果这个样式被你改了，用户就不知道哪里可以输入。当然有些情况下，这个“基本样式”也给我们带来极大的不便，如“checkbox”的基本样式，就是一个难看的方块，你还不能通过CSS修改，因此需要通过一些特殊的方法去"覆盖"他原有的样式。这里就不多做展开。

（2）有基本尺寸，原文描述“有自己的尺寸”，原文的说法也没有错，如“input”标签，在默认情况下就有一个默认长宽的输入框，“video”、“iframe”、“canvas”等标签的默认尺寸是300*150，“img”的默认尺寸是0.

（3）在很多CSS属性上有自己的一套表现规则，这里作者只说明了vertical-align属性，对于替换元素和非替换元素，非替换元素的baseline是小写字母x的小边缘，但在替换元素中则被定义为替换元素的下边缘。（这个问题可以做拓展说明，有兴趣的小伙伴可以研究一下在下面留言，还有哪些属性在两种元素中的表现不同）

2.替换元素的尺寸计算规则

我个人将替换元素的尺寸的权重由高到低分为三类：CSS>私有属性>固有尺寸（注：作者在这里将尺寸分为CSS尺寸，HTML尺寸，固有尺寸）。下面我将通过例子来说明这三种尺寸对替换元素宽高的影响。

（1）固有尺寸指的是替换元素原有的内容，这个原有的内容很有意思，以图片为例，《img src="图片链接"/》，由于图片的基本尺寸是0（谷歌下），但图片本身还含有自己的宽高，如200*100的风景图，那么img标签在没有其他样式说明的情况下他的最终“固有尺寸”是200*100，而不是0，这里原有的内容指的是图片本身的宽高。还有一些元素不需要内容也会自带宽高，以《input type="text"/》为例，你只需要在html里加入这个标签，他就会显示一个可输入的文本框，这就是他的固有尺寸。

（2）私有属性指的替换元素自带的属性，一般会表现在HTML标签中，如《img width="200" height="100" src="400*300的图片"/》，由于width和height私有属性的作用，图片最终会表现为width*height的尺寸，也就是覆盖了图片的固有属性400*300。这里还有一个隐藏的固有属性，那就图片的宽高比，在本例中，图片的宽高比是4:3，因此当你设置《img widht="200" src="400*300的图片" /》时，由于只设置了宽度，没有设置高度，最终图片的高度由 宽度*宽高比 = 150。这个隐藏比例在CSS覆盖中也同样生效。

（3）CSS属性就不用特殊说明了，就是指用CSS设置的属性，由于CSS的权重高于私有属性，往往会使得代码难以维护，比如让你来维护这样一段代码

<img src="1.png" width="200" height="200" />
<style>
img{
    width:200px;
    height:200px;
}
</style>
复制代码

看起来没什么问题，img的CSS属性200px*200px覆盖了私有属性width*height，其表现形式也是一样的，这个时候换了一张图片，尺寸变成200*100了，后来的维护人员觉得改一下私有属性height就完事了，结果发现改不动，改来改去还是200*200。因此个人建议全部用CSS属性维护替换元素的部分样式会减少很多不必要的麻烦。

3.替换元素和content属性的关系

这里我们跳过替换元素与src的关系，直接来研究替换元素和content属性的关系，在CSS世界中，我们把content属性生成的对象称为"匿名替换元素",因此content属性生成的内容都是替换元素，最常见的content替换属性一般在::before/::after中才出现，但在Chrome浏览器中，所有的元素都支持content属性（包括div），在其他的浏览器中，仅在::before/::after中才有支持。因此，我们可以认为下面这两段代码几乎是一样的。

<!-- 请在Chrome浏览器中尝试 -->
<img style="content: url('../1.png')" />
<img src="../1.png" />
复制代码

他们的展现结果是一样的，但仍有一些不同，由于替换元素本身无法被选中的特性（文字也不可以，有兴趣可以自己实验），因此替换元素生成的图片不能被右键保存，准确的说，图片根本无法被选中。因此在使用的时候还是要注意这些小细节。

4.利用content生成辅助信息

由于content属性只有在Chrome浏览器中被所有元素支持，因此我们只探究被公共支持的::after/::before两个伪元素中的content有哪些辅助作用。其实，我们经常会用到after伪类清浮动的技术，这样做的好处在于将辅助功能和样式结合，而不是添加冗余的dom结构。下面是简单代码。

<-- after伪类清浮动 -->
<style>
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}
</style>
复制代码

除了利用after伪类清浮动，还有一些好用的功能。作者举了一些例子，由于会包含后面的一些内容，因此这里只距离说明并提供链接地址，有兴趣可以自己了解一下。

• 辅助实现两端对齐和垂直居中 （链接）
• 配合@font-face规则实现图标字体（链接）
• 利用插入Unicode换行符实现"动态加载中..."文字的动画效果（链接）

除了上面这几个，还有两个个人认为比较有意思的辅助功能会在后面详细展开，分别是利用content attr属性值生成内容，以及利用content计数器实现简单的目录结构。

4.content attr属性值内容生成

由于此功能比较常用，也比较好用，因此单独拎出来作为一节，内容不多，就是用content获取DOM结构上的自定义属性来生成一些信息。下面来看如何用辅助元素实现下面的效果。

代码如下所示：

<div class="list">
	<div class="li" self="音乐">aaa.mp3</div>
	<div class="li" self="电影">bbb.mp4</div>
	<div class="li" self="书籍">《ccc》</div>
</div>
<style>
.li{
    display: block;
    line-height: 40px;
    width: 200px;
    padding-top: 40px;
    position: relative;
    background: yellowgreen;
    overflow: hidden;
    margin:10px 0;
}
.li::after{
	content: attr(self);
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	width: 80px;
	background: yellow;	
	transform: translate(20px) rotate(45deg);
}
</style>
复制代码

6深入理解content计数器

content计数器是一个非常好用且强大的功能，某些情况下，他会比手动计数更加好用，同样的，使用content完成计数功能也有许多需要注意的地方。在了解CSS计数器之前，我们需要了解他的两个属性（counter-reset和counter-increment)和两个方法（counter()和counters()）。下面会依次讲解这两个属性和方法。

首先是counter-reset,顾名思义，counter-reset用于计数器的重置，通常用于父容器重置某个计数器。是的，由于还要记录是哪个计数器，因此这个属性还带有计数器命名的功能。在默认情况下，计数器重置后会从0开始计数，当然你也可以手动设置，因此counter-reset有两个属性值，分别是计数器的名字，以及重置的值从几开始。

counter-reset: hello 1；代表计数器的名称是hello（注意不需要引号） ，计数器从1开始计数，当然这个属性可以不写，默认为0。同时你还可以给多个计数器同时命名，个人觉得没什么软用就不展开了。设置了计数器后，你就可以配合content替换属性和counter()方法进行计数了。代码如下：

<div class="ctn">
    <div class="chid">计数</div>
    <div class="chid">计数</div>
    <div class="chid">计数</div>
</div>
<style type="text/css">
.ctn{
    font-size: 20px;
    color: green;
    background: yellow;
    counter-reset: hello 1;
}
.chid::after{
    content: counter(hello);
}
</style>
复制代码

最终效果如下图所示:

可以看到，计数功能生效了。当然，我们需要的结果是计数器能够自己累加，而不是一直是1，这个时候就需要用到计数器的第二个属性，counter-increment,顾名思义，该属性用于计数器的递增，有点类似于for循环中的i++，该属性有两个值，第一个值代表要递增的计数器名称，第二个值表示每次递增的数字，默认递增值为1。

content-increment:hello 2; 代表hello计数器的值加2 。我们给刚才的例子加上这个属性看一下效果。

<div class="ctn">
    <div class="chid">计数</div>
    <div class="chid">计数</div>
    <div class="chid">计数</div>
</div>
<style type="text/css">
.ctn{
    font-size: 20px;
    color: green;
    background: yellow;
    counter-reset: hello 1;
}
.chid::after{
    content: counter(hello);
    counter-increment: hello 2;
}
</style>
复制代码

最终效果如下图所示

有意思的是，结果是3，5，7，而不是1，3，5。因此可以得出的结论是，重置值每遇到一次increment都会返回直接累加的结果。因此如果你调皮的话，在父元素上也写一个counter-increment，那么相当于重置的值=reset + increment。

7.利用counters()嵌套计数实现目录结构

承接上一节，之前我们用counter()方法实现了计数功能，然而我们平时的序号不可能就只是1，2，3，4....还会有诸如1.1,1.2,1.3等的子序号，前者就是counter()干的事，后者就是counters（）才能实现了。

counters()的基本用法和counter()类似，都是counters(name,types),这里补充说明一下，这里的name指的是计数器的名称，那么第二个参数用来做什么呢？原文中用的string，个人觉得不太恰当，事实上如果你了解list-style属性，你就知道除了阿拉伯数字1234，还有罗马数字等也可以用以计数，这个types支持所有list-style属性。闲话不多说，来看一下如何用counters()实现一个目录结构吧。

<!-- 探究循环计数器 -->
<div class="father">
    <div class="children">
    	children
    	<div class="father">
    		<div class="children">children
    			<div class="father">
    				<div class="children">children</div>
    				<div class="children">children</div>
    			</div>
    		</div>
    		<div class="children">children</div>
    	</div>
    </div>
    <div class="children">
    	children
    </div>
    <div class="children">
    	children
    </div>
</div>
<style type="text/css">
.father{
	counter-reset: hello;
	padding-left: 10px;
}
.children::before{
	content: counters(hello,'-') '. ';
	counter-increment: hello;
}
</style>
复制代码

最终效果如下图所示：

下面我们在来看一个异常的目录结构，请自己体会两者的不同，这里只可意会不可言传，哈哈~

<!-- 探究异常计数器 -->
 <div class="father">
 	<div class="children">children</div>
 	<div class="father">
 		<div class="children">children</div>
 		<div class="children">children</div>
 	</div>
 	<div class="children">children</div>
 	<div class="father"></div>
 	<div class="children">children</div>
 </div>
复制代码

最终效果如下图所示

content的部分到此为止，下面会继续探究padding,border和margin。

不忘初心，方得始终

喜欢博主的童鞋可以扫描二维码加博主好友~ 也可以扫中间二维码入驻博主的粉丝群（708637831）~当然你也可以扫描二维码打赏并直接包养帅气的博主一枚。