CSS进阶（3）——深入理解content-蒲公英云

盒尺寸由内到外为：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）可以被替换”的元素，常见的有、、、<video>等。以图片为例，<img src="1.png" />，我们只需要将src的图片替换掉，元素的内容就会发生改变，因此，内容可替换是替换元素的基本特性之一。除了内容可替换，替换元素还有如下特性。</p> <p> （1）基本样式改不动，原文描述“内容的外观不受页面上CSS的影响”个人觉得有些不妥。什么是基本样式，依旧以图片为例，你可以通过src替换图片，但你不能通过CSS把图片上的“一个男人”变成“一个女人”。有些时候，这为我们带来了方便，如<input type="text" />标签，你可以通过CSS修改他的边框，字体等属性，但他的基本样式，如光标提示，可输入区域等，就是你改不动的，因为如果这个样式被你改了，用户就不知道哪里可以输入。当然有些情况下，这个“基本样式”也给我们带来极大的不便，如<checkbox>的基本样式，就是一个难看的方块，你还不能通过CSS修改，因此需要通过一些特殊的方法去”覆盖”他原有的样式。这里就不多做展开。</p> <p> （2）有基本尺寸，原文描述“有自己的尺寸”，原文的说法也没有错，如<input>标签，在默认情况下就有一个默认长宽的输入框，<video>、<iframe>、<canvas>等标签的默认尺寸是300*150，<img>的默认尺寸是0.</p> <p> （3）在很多CSS属性上有自己的一套表现规则，这里作者只说明了vertical-align属性，对于替换元素和非替换元素，非替换元素的baseline是小写字母x的小边缘，但在替换元素中则被定义为替换元素的下边缘。（这个问题可以做拓展说明，有兴趣的小伙伴可以研究一下在下面留言，还有哪些属性在两种元素中的表现不同）</p> <h3 id="h3-2-"><a name="2.替换元素的尺寸计算规则" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.替换元素的尺寸计算规则</h3><p> 我个人将替换元素的尺寸的权重由高到低分为三类：CSS>私有属性>固有尺寸（注：作者在这里将尺寸分为CSS尺寸，HTML尺寸，固有尺寸）。下面我将通过例子来说明这三种尺寸对替换元素宽高的影响。</p> <p> （1）固有尺寸指的是替换元素原有的内容，这个原有的内容很有意思，以图片为例，<img src="图片链接" />，由于图片的基本尺寸是0（谷歌下），但图片本身还含有自己的宽高，如200*100的风景图，那么img标签在没有其他样式说明的情况下他的最终“固有尺寸”是200*100，而不是0，这里原有的内容指的是图片本身的宽高。还有一些元素不需要内容也会自带宽高，以<input type="text"/>为例，你只需要在html里加入这个标签，他就会显示一个可输入的文本框，这就是他的固有尺寸。</p> <p> （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覆盖中也同样生效。</p> <p> （3）CSS属性就不用特殊说明了，就是指用CSS设置的属性，由于CSS的权重高于私有属性，往往会使得代码难以维护，比如让你来维护这样一段代码</p> <pre><code><img src="1.png" width="200" height="200" /> <style> img{ width:200px; height:200px; } </style> </code></pre><p> 看起来没什么问题，img的CSS属性200px*200px覆盖了私有属性width*height，其表现形式也是一样的，这个时候换了一张图片，尺寸变成200*100了，后来的维护人员觉得改一下私有属性height就完事了，结果发现改不动，改来改去还是200*200。因此个人建议全部用CSS属性维护替换元素的部分样式会减少很多不必要的麻烦。</p> <h3 id="h3-3-content-"><a name="3.替换元素和content属性的关系" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.替换元素和content属性的关系</h3><p> 这里我们跳过替换元素与src的关系，直接来研究替换元素和content属性的关系，在CSS世界中，我们把content属性生成的对象称为”匿名替换元素”,因此content属性生成的内容都是替换元素，最常见的content替换属性一般在::before/::after中才出现，但在Chrome浏览器中，所有的元素都支持content属性（包括div），在其他的浏览器中，仅在::before/::after中才有支持。因此，我们可以认为下面这两段代码几乎是一样的。</p> <pre><code> <img style="content: url('../1.png')" /> <img src="../1.png" /> </code></pre><p> 他们的展现结果是一样的，但仍有一些不同，由于替换元素本身无法被选中的特性（文字也不可以，有兴趣可以自己实验），因此替换元素生成的图片不能被右键保存，准确的说，图片根本无法被选中。因此在使用的时候还是要注意这些小细节。</p> <h3 id="h3-4-content-"><a name="4.利用content生成辅助信息" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.利用content生成辅助信息</h3><pre><code>由于content属性只有在Chrome浏览器中被所有元素支持，因此我们只探究被公共支持的::after/::before两个伪元素中的content有哪些辅助作用。其实，我们经常会用到after伪类清浮动的技术，这样做的好处在于将辅助功能和样式结合，而不是添加冗余的dom结构。下面是简单代码。 <-- after伪类清浮动 --> <style> .clearfix::after{ content:''; display:block; clear:both; } </style> 除了利用after伪类清浮动，还有一些好用的功能。作者举了一些例子，由于会包含后面的一些内容，因此这里只距离说明并提供链接地址，有兴趣可以自己了解一下。 </code></pre><p> （1）辅助实现两端对齐和垂直居中（链接）</p> <p> （2）配合@font-face规则实现图标字体（链接）</p> <p> （3）利用插入Unicode换行符实现”动态加载中…”文字的动画效果（链接）</p> <p> 除了上面这几个，还有两个个人认为比较有意思的辅助功能会在后面详细展开，分别是利用content attr属性值生成内容，以及利用content计数器实现简单的目录结构。</p> <h3 id="h3-5-content-attr-"><a name="5.content attr属性值内容生成" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.content attr属性值内容生成</h3><p> 由于此功能比较常用，也比较好用，因此单独拎出来作为一节，内容不多，就是用content获取DOM结构上的自定义属性来生成一些信息。下面来看如何用辅助元素实现下面的效果。</p> <p><img src="https://image.dandelioncloud.cn/images/20210813/de4d7f5e367a4a00a4ab2dc1e26286e1.png" alt="20181119140257179.png"></p> <pre><code><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> </code></pre><h3 id="h3-6-content-"><a name="6.深入理解content计数器" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6.深入理解content计数器</h3><p> content计数器是一个非常好用且强大的功能，某些情况下，他会比手动计数更加好用，同样的，使用content完成计数功能也有许多需要注意的地方。在了解CSS计数器之前，我们需要了解他的两个属性（counter-reset和counter-increment)和两个方法（counter()和counters()）。下面会依次讲解这两个属性和方法。</p> <p> 首先是counter-reset,顾名思义，counter-reset用于计数器的重置，通常用于父容器重置某个计数器。是的，由于还要记录是哪个计数器，因此这个属性还带有计数器命名的功能。在默认情况下，计数器重置后会从0开始计数，当然你也可以手动设置，因此counter-reset有两个属性值，分别是计数器的名字，以及重置的值从几开始。</p> <p> counter-reset: hello 1；代表计数器的名称是hello（注意不需要引号），计数器从1开始计数，当然这个属性可以不写，默认为0。同时你还可以给多个计数器同时命名，个人觉得没什么软用就不展开了。</p> <p> 设置了计数器后，你就可以配合content替换属性和counter()方法进行计数了。如下所示：</p> <pre><code><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> </code></pre><p><img src="https://image.dandelioncloud.cn/images/20210813/03011bbac934482a9f7d695e606969a3.png" alt="2018111914213739.png"></p> <p>可以看到，计数功能生效了。当然，我们需要的结果是计数器能够自己累加，而不是一直是1，这个时候就需要用到计数器的第二个属性，counter-increment,顾名思义，该属性用于计数器的递增，有点类似于for循环中的i++，该属性有两个值，第一个值代表要递增的计数器名称，第二个值表示每次递增的数字，默认递增值为1。</p> <p> content-increment:hello 2; 代表hello计数器的值加2。我们给刚才的例子加上这个属性看一下效果。</p> <pre><code><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> </code></pre><p><img src="https://image.dandelioncloud.cn/images/20210813/847a77853f394632b8f13a38ae61b4f9.png" alt="20181119144350635.png"></p> <p>有意思的是，结果是3，5，7，而不是1，3，5。因此可以得出的结论是，重置值每遇到一次increment都会返回直接累加的结果。因此如果你调皮的话，在父元素上也写一个counter-increment，那么相当于重置的值=reset + increment。</p> <h3 id="h3-7-counters-"><a name="7.利用counters()嵌套计数实现目录结构" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7.利用counters()嵌套计数实现目录结构</h3><p> 承接上一节，之前我们用counter()方法实现了计数功能，然而我们平时的序号不可能就只是1，2，3，4….还会有诸如1.1,1.2,1.3等的子序号，前者就是counter()干的事，后者就是counters（）才能实现了。</p> <p> counters()的基本用法和counter()类似，都是counters(name,types),这里补充说明一下，这里的name指的是计数器的名称，那么第二个参数用来做什么呢？原文中用的string，个人觉得不太恰当，事实上如果你了解list-style属性，你就知道除了阿拉伯数字1234，还有罗马数字等也可以用以计数，这个types支持所有list-style属性。闲话不多说，来看一下如何用counters()实现一个目录结构吧。</p> <pre><code> <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> </code></pre><p> 效果图如下</p> <p><img src="https://image.dandelioncloud.cn/images/20210813/ee833c5f37d94c719b778a13fcf9b1ea.png" alt="20181119150326304.png"></p> <p>下面我们在来看一个异常的目录结构，请自己体会两者的不同，这里只可意会不可言传，哈哈~</p> <pre><code> <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> </code></pre><p><img src="https://image.dandelioncloud.cn/images/20210813/ea51f8caea0e4f75bc730c3e15f2400a.png" alt="20181119150911144.png"></p> <p>content的部分到此为止，下面会继续探究padding,border和margin。</p>