先创建项目文件，在index.html 文件里面添加视口标签
分析观察项目结构
移动端项目一定要在不同尺寸的设备上面多跑跑，看看页面布局会不会发生变化。
百分比布局，不是每一个元素的尺寸必须必须写成百分百。但是百分比布局，宽写百分比，高正常写。
背景精灵图写法：
先把精灵图放到ps中打开通过ctrl+alt+i 打开图像大小 约束比例选对勾把原图改小50% 假如原图大小是400400 改成200200在通过ps矩形选框工具量一下图形在 x y轴的距离 写到css里面在通过background-size: ;后面的值是缩放图形后的宽消除a标签在移动端 自带高光效果 -webkit-tap-highlight-color: transparent;
dpg 是京东研发的一种图片格式，dpg是其他格式图片大小的一半。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴和垂直的交叉轴。 项目默认沿主轴排列。
flex-direction：属性决定主轴的方向（即项目的排列方向） —row（默认值）：主轴为水平方向，起点在左端。 —row-reverse：主轴为水平方向，起点在右端。 —column：主轴为垂直方向，起点在上沿。 —column-reverse：主轴为垂直方向，起点在下沿
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /*把div变成弹性盒子 display:flex*/ display:flex; /*排列属性*/ /*flex-direction: row;*/ /*flex-direction: row-reverse;*/ /*flex-direction: column;*/ /*flex-direction: column-reverse;*/ width: 600px; height: 300px; background: red; margin: 0 auto; } span{ width: 100px; height: 100px; background: blue; border: 1px solid yellow; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body> </html>flex-wrap：默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 —nowrap（默认）：不换行 —wrap：换行，第一行在上方。 —wrap-reverse：换行，第一行在下方。
flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content：属性定义了项目在主轴上的对齐方式。 —flex-start（默认值）：左对齐 —flex-end：右对齐 —center： 居中 —space-between：两端对齐，项目之间的间隔都相等。 —space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ /*把元素变成弹性盒子*/ display: flex; /*排列方式*/ flex-wrap: wrap; /*y轴多行对起方式*/ /*align-content: flex-start;*/ /*align-content: flex-end;*/ align-content: center; /*align-content: space-between;*/ /*align-content: space-around;*/ width: 900px; height:500px; background: red; margin: 0 auto; } span{ width:150px; height: 100px; background: blue; border: 1px solid tomato; } </style> </head> <body> <div class="a"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> </div> </body> </html>align-items：属性定义项目在交叉轴上如何对齐(设置单行元素，多行元素没有作用)。 —flex-start：交叉轴的起点对齐。 —flex-end：交叉轴的终点对齐。 —center：交叉轴的中点对齐。 —baseline: 项目的第一行文字的基线对齐。 —stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content：属性定义了多根轴线的对齐方式(设置多行元素，单行元素没有作用)。 —flex-start：与交叉轴的起点对齐。 —flex-end：与交叉轴的终点对齐。 —center：与交叉轴的中点对齐。 —space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 —space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 —stretch（默认值）：轴线占满整个交叉轴。
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，控制子元素的大小。 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 flex-end baseline center stretch flex-start
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /*把父元素 变成弹性盒子*/ display: flex; width:600px; height: 500px; background: red; margin: 0 auto; } span{ /*width: 100px;*/ /*flex: 1;*/ height: 100px; background: pink; border: 1px solid yellow; } span:nth-child(1){ flex: 1; /*order: 1;*/ } span:nth-child(2){ flex: 2; /*order:3;*/ order:-10; } span:nth-child(3){ flex: 3; /*order:2;*/ order:-99; } span:nth-child(4){ flex: 4; /*order:40;*/ order:-1; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body> </html>