今日学习内容：
视口和多倍图 视口概念：视口就是浏览器显示页面内容的屏幕区域，视口可以分为：布局视口、视觉视口和理想视口。 理想视口：对于设备来说，理想视口是最理想的视口尺存，需要手动来添加<meta>标签来进行视口的设置 布局视口的宽度和理想视口的宽度一致，简单来说就是设备有多宽，我们的布局的视口就有多宽 视觉视口 指用户正在看到的网站的区域，注意：是正在看到的网站区域，我们是可以通过缩放去操作视距视口里面能看到的内容的，但是不会影响布局视口，布局视口仍然采用的是原来的宽 移动端开发的选择和技术方案 移动端的主流方案 1、单独制作移动端网页（主流）2.响应式的方式来制作网页 浏览器的兼容问题 1、移动端的浏览器基本都是以webkit内核为主，我们主要考虑webkit兼容性即可 2.移动端里面我们可以放心的去使用HTML5和 CSS3的样式 3.同时我们的浏览器的私有前缀只需要考虑添加webkit即可 4.移动端的公共样式文件 移动端的常见布局 1.移动端单独制作（主流） 2、响应式（次要布局方式） 流式布局 1.流式布局就是百分比布局，也叫做非固定像素布局 2.通过盒子的宽度设置为百分比的方式来根据屏幕的宽度进行伸缩，不受固定像素的限制 Flex布局 1.传统布局和flex布局对比 传统布局：兼容比较好，布局繁琐。局限性，在移动端布局的效率不高 Flex布局：1.操作方便，布局简单 应用广泛。2.PC端的浏览器支持情况不是很好。3.如果PC端页面布局不考虑兼容性或者移动端 可以大量的使用flex布局，如果要考虑兼容性，建议选择传统布局方式。 2.Flex的布局原理 Flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供大量的灵活性，任何一个容器都可以指定为flex布局 当我们给父盒子设置为flex布局后，子元素里面的float、clear 和 vertical-align属性都将失效 采用flex布局的元素称为Flex容器（flex container），简称“容器”。 它里面的所有的子元素自动称为容器的成员，称为Flex项目（Flex item），简称“项目”。 核心：通过给父元素添加flex属性来控制子盒子的排列方式 3.Flex布局父项常见属性 flex-direction 设置主轴方向 row、row-reverseclomum、clomum-reverse justify-content 主轴子元素的排列方式 flex-start主轴X轴，从左到右。y轴：从右到左 flex-end: 尾部开始排列 center:所有子元素沿主轴进行居中对齐 space-around: 子元素平分剩余空间 space-between: 两边元素贴边，其他元素平分剩余空间 flex-wrap 元素是否换行 align-items 设置侧轴上子元素的排列方式（单行） flex-start:侧轴的头部开始 flex-end:侧轴的尾部开始 center：让子项沿侧轴居中 strentch:让子元素拉到和父亲一样的高度 align-content 设置侧轴子元素的排列方式，（多行） flex-start:沿侧轴的顶部开始排列 flex-end: 在侧轴的底部开始排列 space around:子项沿侧轴平分剩余空间 space-between:子项两侧先贴边，然后再平分剩余空间 strench:设置子项元素高度平分父元素的高度(前提是子项不能设置高度) flex-flow 是flex-direction 和 flex-wrap的复合属性 Flex布局子项常见属性 1.flex子项占的份数 2.flex子项占的份数:给子项直接设置flex:1; 每一个子项就可以平分父项的空间了 如果父元素中有一个子项有自己的宽高，那么就是在该子项宽高占用的空间后的剩余空间内 其他子项在平分空间 lign-self控制子项自己在侧轴上的排列方式 单独控制某一个子项的排列方式，可以覆盖align-items属性 order属性来定义子项的排列顺序（前后顺序） 数值越小，排列越靠前，默认值0
| 
