分享人:徐炜
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.布局示例
6.扩展思考
7.参考文献
8.更多讨论
学习前端知识我们常常提到盒模型,盒模型的几个要素,margin、border、padding 、content这四个属性,前三个经常用到讲到,但第四个content属性怎么用? content顾名思义,就是“内容”,它的作用就是在css中直接生成网页显示的内容。content属性还有一些新的特征,例如:插入以及移除文档内容的能力,以创建脚注,结语,及段落注释。 但是目前暂时还没有浏览器支持content的扩展功能。
content 属性与 ::before 及 ::after 伪元素配合使用,用于定义元素之前或之后放置的生成内容。 ::before和::after的作用就是在指定的元素内容之前或者之后插入一个包含content属性指定内容的行内元素. 需要注意的是如果没有content属性,伪类元素将没有任何作用。但是可以指定content为空,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到, 这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。
为什么content属性很少用到?
一是因为兼容性的问题,content仅在CSS可用的现代浏览器下起作用;二是因为content需要和:after与:before结合起来使用, 而伪元素不是真实的dom节点,只是实现了一些特定的效果,无法绑定事件,就无法过DOM进行操作使用。
1.插入纯文字。content属性与 ::before 及 ::after 伪元素配合使用生成文本内容。
2.嵌入文字符号。使用content属性的open-quote属性值和close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote用于添加开始的文字符号,close-quote用于添加结束的文字符号。
3.插入图片。content属性也可以直接在元素前/后插入图片, content:url()。
4.插入元素的属性值。content属性可以直接利用attr获取元素的属性,将其插入到对应位置。 attr(attribute),是属性的意思,attr(href),也就是获取href里面的值填充到content里面啊,这是css3的用法。 语法为::after{content:attr(href);}
5.计数器用法。content属性可以插入编号,可以修饰,可以指定编号种类,还可以在编号中进行嵌套。
content:"."是怎么实现清除浮动的?
如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。 这个对这个盒子使用::after这个伪元素,在盒子的结尾添加content属性,添加了一个句号".", 并设置display为block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的。
参考一: CSS3的content属性详解
参考二:菜鸟教程对content的解释
参考三:W3C对content的解释
感谢大家观看
BY :黄志波|罗宇|冯馨雨|隋鑫|徐炜