1、内容生成：
通过css的方法，在指定元素的【前面】 或 【后面】 添加一部分内容
伪元素选择器：
:before - 能匹配到某个元素的内容区域之前
:after - 能匹配到某个元素的内容区域之后
<div>before 内容 after</div>
属性：content 属性 - 一般都会配合着:before 或 :after进行插入生成的内容
常用取值：
1、直接写文字
2、写入url("图片路径") - 图片
3、计数器
固定套路：
1、浮动的万能清除法 - 更复杂
父元素:before{
content: "";
display: table;
clear:both;
}
*2、有的情况我们会见同时出现背景渐变和背景图片
选择器{
height: 800px;
border: 1px solid #000;
background: linear-gradient(45deg,#020031,#6d3353);
}
选择器:after{
content:"";
display: block;
background: url("图片");
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
2、计数器：可以再指定元素内容区域之前后之后，通过计数器的到一个自动生成的数字作为填充内容
1、counter-reset 属性
作用：声明/创建 一个计数器
语法：counter-reset: 名称 初始值...;
注意：
1、声明计数器的位置
计数器必须放在父元素中去声明，子元素才可以使用
如果页面中所有的元素统一使用一个计数器的话，那么该计数器可以声明在body中
2、省略初始值，默认为0
counter-reset: c1; === counter-reset: c1 0;
3、声明多个计数器
counter-reset: c1 0 c2 0;
2、counter-increment：
作用：设置 计数器每次使用时增加的一个数，默认为1
counter-increment: 名称 1; === counter-increment: 名称;
3、counter()函数
作用：使用计数器
counter(名称)
2、多列：将一段文本，显示的分割成 几列去展示
属性：
1、column-count: 数值;//规定元素被拆分成几列
2、column-gap: 数值px;//列与列之间距离
3、column-rule: 1px solid #000;//列与列之间边框
3、CSS3 HACK：做浏览器兼容
目前为止的主流浏览器：
1、chrome
2、safari
3、firefox
4、opare
5、IE - 但是老IE（8以前），会有很多很多的兼容性问题
css3hack解决老IE：条件注释
<!--[if lte IE 8]>
只要你的浏览器小于等于ie8，那么就会执行里面的操作，而且其他浏览器不管
<![endif]-->
固定套路：
<!--[if lte IE 8]>
<link href="ie.css">
<![endif]-->
以前很有用，现在一般般：
原因：1、window10不会自带老IE
2、现在流行趋势，而是手机端 - 手机端不存在IE，安卓自带谷歌，IOS自带Safari
那种情况可能用到：
1、事业单位，国企
