【css-15】
知道css有个content属性吗？有什么作用？有什么应用？
分享人：邹志程
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
盒模型的几个要素，margin、border、padding 、content这四个属性，
前三个经常用到讲到，但第四个content属性怎么用？今天讲讲这个 。
content的意思顾名思义，是“内容”，它的作用就是在css中直接生成网页显示的内容，
这个属性要结合：before和：after这俩个伪元素来使用。
before和after伪元素的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素。
需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，同时正如前面所说，
插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的原因，所以也就无法通过DOM对其进行操作。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如一些图标。
content一般在元素前后插入一些文本，
小图标，或者自定义一些小图形（如三角形，圆等图形）的时候使用，
还有一个就是利用计数器插入项目的编号。
6.拓展思考
为什么content属性很少用到?
因为content需要和:after与:before结合起来使用， 而伪元素不是真实的dom节点，只是实现了一些特定的效果，无法绑定事件，就无法过DOM进行操作使用。
8.更多讨论
1、content必须结合:after或:before使用吗？
回答： 必须结合伪元素:after或:before使用，否则不生效。
2、content的兼容性怎么样？
回答：目前所有主流浏览器都支持content属性。但在IE6 和IE7 以及IE8的IE7兼容模式中，:before 和:after 都不被支持，所以可以认为它们都不支持content 属性。IE8只有指定!DOCTYPE才支持content属性，ie9以上支持。
3、除了上面提到的应用还有其他方面吗？
嵌入文字符号。使用content属性的open-quote属性值和close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote用于添加开始的文字符号，close-quote用于添加结束的文字符号。