css 盒子模型

一、标准盒子模型

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%