这是我参与2022首次更文挑战的第23天
四、伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
1.注意：
before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
2.语法：
element::before {}
3.注意：
1）before 和 after 必须有 content 属性
2）before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
3）伪元素选择器和标签选择器一样，权重为 1
4.伪元素使用场景：
伪元素选择器使用场景1：伪元素字体图标
伪元素选择器使用场景2：仿土豆效果
伪元素选择器使用场景3：伪元素清除浮动
清除浮动的方法：
额外标签法也称为隔墙法，是 W3C 推荐的做法；父级添加 overflow 属性；父级添加after伪元素；父级添加双伪元素
1）额外标签法也称为隔墙法，是 W3C 推荐的做法。不提倡，因为每次清除一个地方的浮动，都需要添加一个盒子，额外大量增加HTML结构。
2）后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。
四、盒子模型
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1. box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
2. box-sizing: border-box 盒子大小为 width
如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
五、图片变模糊
CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
六、计算盒子宽度 width: calc 函数
CSS3 calc 函数:
alc() 此CSS函数让你在声明CSS属性值时执行一些计算。
括号里面可以使用 + - * / 来进行计算。
CSS3 还增加了一些 动画 2D 3D 等新特性。
