标准盒模型

1、一个盒子的构成：

• 盒子中的内容：content 宽=width 高=height

• 盒子的边框：border

• 盒子边框与内容之间的距离：称为填充---padding 内边距（内补丁）

• 如果有多个盒子存在，盒子与盒子之间的距离：称为边界---margin，外边距（外补丁）

• 整个盒子模型在网页中所占的宽度：左边界+左边框+左填充+内容+右填充+右边框+右边
  界

  
  

• 关于如何切图：

PC：先看全图分块切，
移动端：看所有图片找出共同模块，分组切

• 关于适配问题：

  
  

2、弹性布局

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 0

flex-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