媒体查询（网页自适应）

width&height代表浏览器宽高。
device-width&device-height代表设备宽高，一般用在移动端。

1. 在style标签内部写：

   <style>
   @media screen and (min-device-width:400px) and (max-device-width:600px){
   
   }
   </style>
   #screen可写可不写，主要区分当前是屏幕显示还是打印。

2. 在style标签上写：

   <style media="(min-device-width:400px) and (max-device-width:600px)"></style>
   <style media="(min-device-width:200px) and (max-device-width:399px)"></style>

3. 外部引入：

   <link href="css/1.css" rel="stylesheet" media="(min-device-width:400px) and (max-device-width:600px)">

   flex布局

   主轴和交叉轴

   子元素的排列方向叫主轴，与之垂直的叫交叉轴

   display:flex

   父元素中设置display:flex，子元素就遵从flex布局。

   flex-direction

   子元素在父元素盒子中的排列方式
   

   flex-wrap

   子元素在父元素盒子中是否换行(列)显示
   

   jusify-content

   如果子元素排列存在剩余空间，用来设置剩余空间的间距表现形式
   

   align-items

   设置每个flex元素在交叉轴上的默认对齐方式（特别针对单行，单行当做一个整体处理）
   

   align-content

   设置每个flex元素在交叉轴上的默认对齐方式（针对多行，整体排列。多行当做一个整体处理）
   

   针对子元素的处理

   

   

作者： 猪皮怪