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）~固然你也能够扫描二维码打赏并直接包养帅气的博主一枚。