媒体查询
@media 表示媒体查询
screen 运行的设备条件
and且
max-width尺寸条件
==è 同时满足设备条件和尺寸条件的时候，代码才生效。
媒体查询的使用：找条件
1：确定当前页面的css样式以什么端为主的
2：在html元素结构相同，pc端与移动端布局不同的时候，
在特殊尺寸下有特别的样式，适合使用媒体查询
3：搭建自己的栅格系统时适合使用媒体查询
1.主要的布局为pc端 兼容移动端
条件是pc端与移动端临界间条件
注意：移动端的基础样式是媒体查询外样式。==> 样式冲突思路混乱
1: 无论基础样式是什么，在媒体查询中一律重写所有的样式，
所有的选择器
2在进行代码优化处理
删除相同选择器中 相同样式
图片格式
所有变更图片大小的属性全部都是在消耗浏览器性能
====>为了提高性能，直接使用原图
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？
png 无损图片
jpg 有损图片
gif 动图 无损
webp 谷歌的，支持有损无损 压缩图
div:after 与 div::after 伪元素 与伪类选择器的区别是什么？
伪类选择器的作用 选中html添加样式
伪元素：是在元素前面或者后面添加一个元素，可以具备所有元素的特点
