媒体查询

@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添加样式

        伪元素：是在元素前面或者后面添加一个元素，可以具备所有元素的特点