关于前端: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%