一、规范盒子模型
- 盒子的总宽度 = margin-left + margin-right + border-left + border-right + padding-left + padding-right + width(内容的宽度)
-
盒子的总高度 = margin-top + margin-bottom + border-top + border-bottom + padding-top + padding-bottom + height(内容的高度)
二、怪异盒子模型(IE 盒子模型)
- 盒子的总宽度 = margin-left + margin-right + width
- 盒子的总高度 = 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%