一、规范盒子模型

  1. 盒子的总宽度 = margin-left + margin-right + border-left + border-right + padding-left + padding-right + width(内容的宽度)

  2. 盒子的总高度 = margin-top + margin-bottom + border-top + border-bottom + padding-top + padding-bottom + height(内容的高度)

二、怪异盒子模型（IE盒子模型）

  1. 盒子的总宽度 = margin-left + margin-right + width
  2. 盒子的总高度 = margin-top + margin-bottom + height
    其中 width = border-left + border-right + padding-left + padding-right + 内容的宽度
    height = border-top + border-bottom + padding-top + padding-bottom + 内容的高度

三、弹性盒子

1.父元素设置的属性
（1）display:flex; 将父元素设置为flex盒子
（2）flex-direction 主轴的方向

  a. flex-direction:row;  左对齐  默认的排列形式  b. flex-direction:row-reverse;  右对齐  c. flex-direction:column; 纵向排列  d. flex-direction:column-reverse; 反转纵向排列，从后往前排，最初一项排在最下面

（3） justify-content 主轴的水平线布局

a. justify-content:flex-start 默认值  开始地位向后排列b. justify-content:flex-end 从后向前排列c. justify-content:center  居中d. justify-content:space-between  两头间隔相等 两边无间距e. justify-content:space-around  间隔平均分配

（4） align-items 纵轴的对其形式

a. align-items:flex-start  开始地位向后排列b. align-items:flex-end  从后向前排列c. align-items:center  垂直居中

2.子元素设置的属性

flex-grow 即flex:1依据弹性盒子元素所设置的扩大因子作为比率来调配残余空间默认为0，即如果存在残余空间，也不放大如果只有一个子元素设置，那么按扩大因子转化的百分比对其调配残余空间。0.1即10%，1即100%，超出按100%