【CSS-TASK15】
知道css有个content属性吗?有什么作用?有什么应用?
分享人:郭晨阳
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
学习前端知识我们常常提到盒模型,盒模型的几个要素,margin、border、padding 、content这四个属性,前三个经常用到讲到,但第四个content属性怎么用?今天我们就来讲讲这个 。
content的意思顾名思义,是“内容”,它的作用就是在css中直接生成网页显示的 内容, 这个属性要结合:before和:after这俩个伪类属性来使用。下面详细介绍它的用法 。
before和after是什么呢?
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素.
需要注意的是如果没有content属性,伪类元素将没有任何作用。但是可以指定content为空,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。
伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性,比如字体等。
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入。
content属性详解
为什么content属性很少用到?
前端书写代码时提倡内容样式的分离,而content在css中插入内容正好又混淆了这一原则;并且该属性兼容性也不太好。
参考一:CSS3的content属性详解
参考二:菜鸟教程content属性
语法:
return[()[expression][]];
可选项 expression 参数是要从函数返回的值。如果省略,则该函数不返回值。
用 return 语句来终止一个函数的执行,并返回 expression 的值。如果 expression 被省略,
或在函数内没有 return 语句被执行,则把值 undefined 赋给调用当前函数的表达式。