目录
align-items设置子元素在侧轴方向的排列方式（单行）
align-content设置元素在侧轴上的排列顺序（换行）
align-content 和 align-items的区别
1.移动端基础
2.视口
视口就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口
布局视口layout viewport
缺点：呈现在手机上的元素很小，要手动缩放页面
视觉视口visual viewport
可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度；我觉得就是手机屏幕的大小
理想视口ideal viewport
需要手动添加meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局视口就有多宽
总结
meta视口标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
initial-scale 初始缩放比，一般设置为1.0；若设置为2就是写好程序的2倍
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes或no(1或0)
3.二倍图
物理像素&物理像素比
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的
开发的时候1px不是一定等于1个物理像素的；如在iPhone8中，1px等于2个物理像素
1个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比
Retina视网膜屏幕是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度
多倍图
想要在手机中呈现出50px*50px的图片，可以用二倍图来提高图片质量，先插入100px*100px的图片，再在样式中将图片设置为50px*50px，这样在手机中打开的效果比直接插入50px*50px的图片好（在iPhone8中，因为1px=2个物理像素，就是会放大两倍）
在不同的设备中，因为物理像素比不同，所以会出现多倍图的使用
背景缩放background-size
background-size:背景图片宽度 背景图片高度；
可以只写一个参数，会进行等比例缩放
background-size:500px 500px;
background-size:50%; 图片宽度只占盒子的一半，高度随比例改变
background-size:cover; 图片等比例覆盖盒子，可能会使图片显示不完全
background-size:contain; 图片等比例扩大，知道宽或高中的一方达到盒子的边界停止，可能会·出现空白
多倍图切图
可以用background-size来改变插入图片的大小，切图时选择iOS来获得多倍图
4.移动端开发选择
单独制作移动端页面
响应式兼容PC移动端
移动端浏览器
CSS初始化normalize.css
CSS3盒子模型box-sizing
box-sizing-border-box
传统盒子模型：盒子宽度=CSS中设置的width+border+padding
CSS3盒子模型：盒子宽度width中包含了border和padding
也就是说CSS3中的盒子模型不会被padding和border撑大了
特殊样式
移动端技术选型
5.流式布局（百分比布局）
流式布局，就是百分比布局，也称非固定像素布局
将盒子的宽度设置成百分比来让盒子根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充
设置max-width最大宽度和min-width最小宽度，来限制伸缩的范围；因为伸缩过小可能会挤掉盒子
京东案例
二倍精灵图制作：先在ps中把整张图片缩小一半，再去测量所需要小图标的位置，在样式中用background-size也要把图片缩小一半
图片中间有空隙，给所有的图片添加vertical-align:top来清除空白空隙
DPG图片压缩技术和webp图片格式
选择子盒子，可以用公式，如n+2就是选择从第二个盒子开始往后面的全部盒子；设置左边框会挤掉盒子，这就需要css3盒子模型box-sizing:border-box;来解决边框挤掉盒子的问题
6.flex布局
布局原理
当父盒子设置为flex布局后，子元素的float、clear和vertical-align属性将会失效
给父容器添加flex属性，子元素的排列可以为横向也可以为竖向
在设置div中装有span时，必须在父盒子中添加display:flex效果才能呈现
flex布局父项常见属性
flex-direction:设置主轴的方向
justify-content:设置主轴上子元素的排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式（多行）
align-items:设置侧轴上的子元素排列方式（单行）
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
flex-direction设置主轴方向
flex布局中，分为主轴和侧轴，行和列，x轴和y轴；确定一方为主轴后另一方即为侧轴
属性值：row默认是从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上
justify-content设置主轴元素排列方式
该属性只设置主轴子元素，所以在使用时一定要先确定好主轴是哪个
属性值：flex-start:默认是从头部开始，如果主轴是x轴，则从左到右
flex-end:从尾部开始排列
center:在主轴上居中对齐（x轴是水平居中，y轴是垂直居中）
space-around:平分空间
space-between:先将两侧的盒子贴边，中间的盒子再平分剩余空间
flex-wrap换行
给父盒子添加flex后，就算给子盒子设置了margin，在放置多个父盒子时（明显一行放不下），还是会在一行内显示，但是子盒子的宽度会被减小（为了一行内放下更多的子盒子）
可以选择nowrap属性
align-items设置子元素在侧轴方向的排列方式（单行）
该属性是控制子项在侧轴上的排列方式，子盒子只在一行上显示没有换行
属性值：flex-start:
flex-end:
center:在侧轴方向上居中
stretch:拉伸（通常是不给子元素设置高度，子元素的高度会和父元素的高度保持一样）
将子元素设置成在整个父盒子中处于中间位置：先设置justify-content:center，再设置align-items:center
左侧是以x轴为主轴，右侧是以y轴为主轴
align-content设置元素在侧轴上的排列顺序（换行）
该属性用在子元素出现换行的情况中，不要和以y轴为主轴的元素成多行显示搞混，该属性出现时是子盒子换行了，添加space-around在侧轴平分空间 、space-between在侧轴贴两侧中间平分和center在侧轴中间显示
align-content 和 align-items的区别
flex-flow复合属性
flex-flow 是 flex-direction 和 flex-wrap属性的复合属性
flex-flow: row wrap;
flex布局子项常见属性
flex属性定义子项目分配剩余空间，用flex来表示占多少份数，份数可以为1、2、3等
该图中就是定义一个div,在里面放置几个span,不给小盒子宽度，给小盒子设置flex:1来决定小盒子在大盒子中的占比是多少；下图就是第一个和最后一个盒子占比相同，中间的盒子占比更大
align-self设置子项在侧轴上的排列顺序
align-self可设置单个子项在侧轴上的排列顺序，可覆盖align-items属性
该图即为将第三个子盒子添加align-self属性，让它下到父盒子底部
order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0（一般是将同一层次上的子盒子调换顺序），可以为负值
携程案例
利用flex布局来设置“上图下字”的样式：将y轴设置为主轴，利用align-items:center来将推按居中对齐
共同类名前缀[class^=.....]
给大盒子设置圆角时，发现没有显示出来，就给父盒子添加overflow:hidden
将图片设置为背景且添加background-size后图片不在指定位置，可在background中加上bottom center即可做到靠低端下面居中对齐
颜色渐变
必须添加浏览器私有前缀
起始方向可以是方位名词（默认是从上往下，可以是从左往右left，也可以是沿对角线top left）或者度数
1815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
