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

ゝ一世哀愁。 2021-09-17 01:20 367阅读 0赞

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

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

依旧是将小标题提前，请按照兴趣阅读

1.什么是替换元素

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

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

4.利用content生成辅助信息

5.content attr属性值内容生成

6.深入理解content计数器

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

### 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中才有支持。因此，我们可以认为下面这两段代码几乎是一样的。

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

（1）辅助实现两端对齐和垂直居中 （[链接][Link 1]）

（2）配合@font-face规则实现图标字体 （[链接][Link 2]）

（3）利用插入Unicode换行符实现"动态加载中..."文字的动画效果 （[链接][Link 3]）

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

### 5.content attr属性值内容生成 ###

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

![20181119140257179.png][]

<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>

![2018111914213739.png][]

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

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

![20181119144350635.png][]

有意思的是，结果是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>

效果图如下

![20181119150326304.png][]

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

<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>

![20181119150911144.png][]

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

[Link 1]: https://demo.cssworld.cn/4/1-7.php
[Link 2]: https://demo.cssworld.cn/4/1-8.php
[Link 3]: https://demo.cssworld.cn/4/1-9.php
[20181119140257179.png]: /images/20210813/de4d7f5e367a4a00a4ab2dc1e26286e1.png
[2018111914213739.png]: /images/20210813/03011bbac934482a9f7d695e606969a3.png
[20181119144350635.png]: /images/20210813/847a77853f394632b8f13a38ae61b4f9.png
[20181119150326304.png]: /images/20210813/ee833c5f37d94c719b778a13fcf9b1ea.png
[20181119150911144.png]: /images/20210813/ea51f8caea0e4f75bc730c3e15f2400a.png