今天完成的事情：

制作小课堂

明天计划的事情：

写复盘项目页面

遇到的问题：

没

收获：

1.背景介绍

学习前端知识我们常常提到盒模型，盒模型的几个要素，margin、border、padding

、content这四个属性，前三个经常用到讲到，但第四个content属性怎么用？今天我们就来讲讲这个

。

content的意思顾名思义，是“内容”，它的作用就是在css中直接生成网页显示的

内容，

这个属性要结合：before和：after这俩个伪类属性来使用。下面详细介绍它的用法

。

2.知识剖析

content需要配合:before和:after这俩个 伪元素使用，来插入生成内容。

roleWhat's the application/2.png">

三.常见问题

content各属性值的具体使用方法

四.解决方案

具体用法

五.编码实战

h1::after{

content:"我是h1后插入内容"

}

h2::after{

content:none

}

h1{

quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/

}

h1::before{

content:open-quote;

}

h1::after{

content:close-quote;

}

h2{

quotes:"\"" "\"";  /*添加双引号要转义*/

}

h2::before{

content:open-quote;

}

h2::after{

content:close-quote;

}

h3::after{

content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)

}

六.拓展思考

为什么content属性很少用到

个人认为，我们前端书写代码时提倡内容样式的分离，而content的伪类写法正好又混淆了这一原则

七.更多讨论

content:"."是怎么实现清除浮动的？