智一面☞☞CSS 之熟悉又陌生的 content

在开发中遇到类似清除浮动、小图标、替换内容等场景时不可避免会遇到 content 属性，一般就是百度下解决方案，很少细究到底， content 属性用于与 :before 及 :after 伪元素配合使用，来插入生成内容。使用 content 属性插入的内容都是匿名的可替换元素。首先我们需要先了解下什么是可替换元素呢？

☞☞☞☞​​​​​​​☞☞来看看

积题网：
http://t.gtalent.cn/?fm=wls

替换元素

典型的替换元素：<img>、<video>、<iframe>、<textarea> 和 <input>

替换元素的尺寸计算规则

替换元素的尺寸计算规则有三种尺寸：

• 固有尺寸：替换内容原本的尺寸
• HTML 尺寸：HTML 原生属性 width 和 height
• CSS 尺寸：通过 CSS 设置的宽高属性

尺寸显示规则优先级为 CSS 尺寸 > HTML 尺寸 > 固有尺寸。

替换元素和 content 是什么关系呢？

替换元素之所以为替换元素，就是因为其内容可替换，即盒模型中的 content box 可替换。CSS 的 content 属性就用于替换内容，也可以说，content 属性决定了是替换元素还是非替换元素。

content 的使用场景

content 的定义中就提到过是和 :before 及 :after 伪元素配合使用。:before 及 :after 是最常见的伪元素，想必大家都不陌生。

再简单介绍下 :before 和 :after：

• 默认 display: inline；
• 必须设置 content 属性，否则无效；
• 默认 user-select: none，即 :before 和 :after 的内容无法被用户选中；
• 不可通过 dom 使用，就是本身不存在的页面元素，HTML 源代码里，找不到它们，但从视觉上，却能看到它们的存在

插入字符

使用 content 插入字符一般是给空元素设置默认值，类似 input 的 placeholder 属性一样，只在元素没有内容的时候展示，

辅助元素生成

此时核心点不在于 content 生成的内容，而是伪元素本身。通常我们会把 content 的属性值设置为空字符串，使用其他 CSS 代码来生成辅助元素，或实现图形效果，或实现特定布局。

图形效果

使用 ::after 伪元素插入匿名替换元素，设置 content 为空，此元素没有内容，通过 CSS 样式来达到想要的图形效果。

清除浮动

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为 0 的问题，

上面三者缺一不可：

• content: ''：通过 ::after 给元素添加一个空的伪元素。
• clear: both：清除浮动，使得元素周围两边都不浮动。
• display: block：clear 只对块级元素生效。

通过添加元素清除浮动，触动 BFC，使元素的高能够自适应子盒子的高。

图片生成

直接用 url 功能符显示图片，既可以在文字前后添加图片，又可以直接替换文字。

attr 属性值内容生成

使用 attr 获取元素属性值达到效果，一般用于获取 a 标签的连接

字符内容生成

content 字符内容生成就是直接写入字符内容，中英文都可以，比较常见的应用就是配合 @font-face 规则实现图标字体效果。

@font-face 规则

@font-face 规则指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载。它的属性和字体相似

计数器

 

content 的计数器是使用 CSS 代码实现随着元素数目增多，数值也跟着变大的效果。功能非常强大、实用，且不具有可替代性。

计数器包含两个属性和一个方法：

1. counter-reset：“计数器-重置”的意思，主要作用就是给计数器起个名字。也告诉从哪个数字开始计数，默认值是 0，值可以为负数。
2. counterincrement：“计数器递增”的意思，值为 counter-reset 的 1 个或多个关键字，后面可以跟随数字，表示每次计数的变化值，默认变化值为 1，值可以为负数。

普照规则”：普照源（counter-reset）唯一，每普照（counter-increment）一次，普照源增加一次计数值。

1. counter()/counters()：都是计数方法，显示计数，counters 用于嵌套计数。

 counter 默认值为 0，默认递增为 1；

 第一个 reset 下面有两个兄弟 conter 标签，递增则为 1 和 2;

  第一个 counter 下面有 reset 标签，嵌套了一层重置计数，则有1.1、1.2 等；

 同理第二个 counter 下面有 2.1、2.2 等。