1、一个盒子的构成：
盒子中的内容：content 宽=width 高=height
盒子的边框：border
盒子边框与内容之间的距离：称为填充—padding 内边距（内补丁）
如果有多个盒子存在，盒子与盒子之间的距离：称为边界—margin，外边距（外补丁）
整个盒子模型在网页中所占的宽度：左边界+左边框+左填充+内容+右填充+右边框+右边
界
关于如何切图：
PC：先看全图分块切，
移动端：看所有图片找出共同模块，分组切关于适配问题：
2、弹性布局
1 | display: flex | inline-flex; (适用于父类容器元素上) |
定义一个 flex 容器，内联或者根据指定的值，来作用于下面的子类容器。
- box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）
- inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）
- flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）
- inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）
- flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）
- inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）
2.1 H5 用的老版本伸缩盒模型 display: box;
常用属性： - box-flex:子元素的之间的比例。
可以定义把父元素分成几份，如一个父 div 的 width：400px；里面有三
个子 div，分别定义-webkit-box-flex：2; -webkit-box-flex：1; -webkitbox-flex：1;那么三个子
div 的宽度会自动充满整个父盒子，宽度分别是
400*(2/2+1+1)=200px; 400*(1/2+1+1)=100px; 400*(1/2+1+1)=100p
x; - box-orient: 用来确定子元素的方向，是横着排还是竖着走。
可选的值有：horizontal、vertical、inline-axis、block-axis、inherit
Horizontal 与 inline-axis 的表现是一致的，让子元素横排。
Vertical 与 block-axis 的表现是一致的，让子元素纵列。
l box-direction：是用来确定子元素的排列顺序。
可选的值有：normal、reverse、inherit
Normal 是默认值，表示按照正常顺序排列，从上到下，从左到右。
Reverse 表示与正常顺序相反。 - box-align：与 box-pack 都是决定盒子内部剩余空间怎么使用的，
决定了父容器里子容器的垂直对齐方式。
可选的值有：start、end、center、baseline、stretch
Start 表示居顶对齐。
End 表示居底对齐。
Center：表示居中对齐。
Baseline：表示与基线对齐。
Stretch 为默认值，表示拉伸，拉伸到与父容器等高。 - box-pack：决定了父标签水平遗留空间的使用。即父容器里子容器
的水平对齐方式。
可选的值有：start、end、center、justify
Start 为默认值，表示水平居左对齐。
End 表示水平居右对齐。
Center：表示水平居中对齐。
Justify 表示水平两端对齐。
2.2 新版本 display:flex;
常用属性：
- flex-direction: row | column | row-reverse | column-reverse
决定主轴的方向（即项目的排列方向）。
flex-warp: nowrap | wrap | wrap-reverse;
定义是否要换行，如何换行。
justify-content:flex-start|flex-end|center|space-between|space-around
定义项目在主轴上的对齐方式
align-items: flex-start |flex-end |center |baseline |stretch;
定义项目在交叉轴上如何对齐
flex-flow: flex-direction flex-warp;
以上属性均加在父盒子上生效。下边两个是加在子元素上生效的属性：flex: 是 flex-grow，flex-shrink，flex-basis 三个属性的简写。
默认值：0 1 auto；
设置或检索伸缩盒对象的子元素如何分配空间。后两个属性可省。
如果缩写 flex:1, 则其计算值为：1 1 0flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览
器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。align-self: auto |flex-start |flex-end |center |baseline |stretch;
允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认
值为auto，表示继承父元素的align-items属性。除auto外，其余同align-items。
总结：
伸缩盒模型
父元素 子元素
方向 主轴对齐(x) 交叉轴对齐(y) 分配空间
box
box-orient
box-pack box-align box-flex
box-direction
flex flex-direction Justify-content align-items flex
注：flex 新增属性——flex-wrap(是否换行),align-self（子元素自己的对齐方式）
参考网址：
http://caibaojian.com/flexbox-guide.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.w3cplus.com/css3/css3-flexbox-layout.html