一、今日学习内容： 视口和多倍图 视口是浏览器显示页面内容的屏幕区域，分为：布局视口、视觉视口和理想视口 为了使网站在移动端有最理想的浏览和阅读宽度而设定的，对于设备来说，理想视口是最理想的视口尺存 需要手动来添加<meta>标签来进行视口的设置 meta视口标签的主要目的 布局视口的宽度和理想视口的宽度一致，简单来说就是设备有多宽，我们的布局的视口就有多宽 视觉视口 指用户正在看到的网站的区域，注意：是正在看到的网站区域，我们是可以通过缩放去操作视距视口里面能看到的内容的，但是不会影响布局视口，布局视口仍然采用的是原来的宽度 布局视口 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早起的PC端页面在手机上显示的问题，IOS和Andriod一般都是将这个视口设置为980px，所以PC端页面大多都能在手机上呈现，但是元素会看上去很小，一般是可以通过手机进行网页的缩放 meta标签 name=“viewport” 声明设置视口的meta标签 width 设置的是viewport的宽度，设置为device-width特殊值时，是让页面宽度和设备宽度保持一致 initial-scale 初始缩放比 maximum-scale 最大的缩放比 minimum-scale 最小的缩放比 user-scalable 是否允许用户进行缩放，可以设为yes或者no （1或者0） Flex的布局原理 Flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供大量的灵活性，任何一个容器都可以指定为flex布局 当我们给父盒子设置为flex布局后，子元素里面的float、clear 和 vertical-align属性都将失效 采用flex布局的元素称为Flex容器（flex container），简称“容器”。它里面的所有的子元素自动称为容器的成员，称为Flex项目（Flex item），简称“项目”。 核心：通过给父元素添加flex属性来控制子盒子的排列方式 Flex布局父项常见属性 flex-direction 设置主轴方向 flex-direction: row; 默认值：将x轴当做主轴，所有子元素从左到右依次排列 flex-direction: row-reverse; 将x轴当做主轴，所有子元素沿着x轴从右到左进行排列 flex-direction: column; 将y轴当做主轴对待，所有子元素从上到下进行排列 flex-direction: column-reverse; 将y轴当做主轴对待，所有子元素从下到上进行排列 justify-content 设置主轴上子元素的排列方式 justify-content: flex-start; 默认值： 从头部开始，如果主轴是X轴就是从左到右，如果主轴是Y轴就是从上到下 justify-content: flex-end; 从尾部开始排列 justify-content: center; 所有子元素沿主轴进行居中对齐 justify-content: space-around; 所有子元素平分主轴上的剩余空间 justify-content: space-between; 先让边缘的两个元素贴边，然后其他的元素再平分剩余的空间 flex-wrap 设置子元素是否换行 默认情况下，子元素都排列一条线上，默认是不进行换行的 flex-wrap: nowrap; 默认值：不换行 flex-wrap: wrap; 让子元素自动换行 align-items 设置侧轴上子元素的排列方式（单行） align-items: flex-start; 从侧轴的头部开始排列 align-items: flex-end; 从侧轴的底部开始排列 align-items: center; 让子项沿侧轴居中 align-items: stretch; 将子项拉伸到和父级一样的高度（前提是子项不能有高度） align-content 设置侧轴上的子元素的排列方式（多行） align-content: flex-start; 沿侧轴的顶部开始排列 align-content: flex-end; 在侧轴的底部开始排列 align-content: center; 让所有的子项侧轴居中排列 align-content: space-around; 子项沿侧轴平分剩余空间 align-content: space-between; 子项两侧先贴边，然后再平分剩余空间 align-content: stretch; 设置子项元素高度平分父元素的高度(前提是子项不能设置高度) flex-flow 是flex-direction 和 flex-wrap的复合属性 flex-flow: column wrap; 可以同时控制主轴方向和是否换行 Flex布局子项常见属性 flex子项占的份数 给子项直接设置flex:1; 每一个子项就可以平分父项的空间了 如果父元素中有一个子项有自己的宽高，那么就是在该子项宽高占用的空间后的剩余空间内其他子项在平分空间 align-self控制子项自己在侧轴上的排列方式 单独控制某一个子项的排列方式，可以覆盖align-items属性 order属性来定义子项的排列顺序（前后顺序） 数值越小，排列越靠前，默认值0 二、今日问题：无 三、解决方案：无
| 
