布局方法

一、浮动与定位

二、弹性盒子

——最好加指定浏览器前缀

将父元素指定为display：box(/inline-box/inline-flex)时，子元素就变为弹性盒子遵循父元素制定的排序方式。不遵循标准流的规则。

box-orient:  排列方式
horizontal;横向排列
vatical;纵向排列
box-pack: 子元素的对齐方式——基于父元素
start; 从开始位置对齐（大多数等同于左对齐）
center; 居中对齐
end; 从结束位置对齐
justify； 两端对齐
box-align: 子元素的对齐方式——基于子元素本身
start;
end;
center;
baseline; 子元素基线对齐
stretch; 子元素自适应父元素尺寸
box-flex: 子元素所占父元素剩余空间的比例
number;
box-direction: 子元素是否反序排列
reverse; 反序
normal; 正常顺序（默认）
box-flex-ground: 子元素所属组
——动态给元素内容所需空间，父元素所剩空间分给其他元素。
1;（默认）
<intager> 整数值
box-ordinal-ground: 显示顺序——相同组（相同值）的元素显示顺序
1; （默认）
<intager> 整数值
box-lines: 子元素是否可以换行显示
single; 子元素只在一行内显示
multiple; 自动换行

三、960 布局

官网/960.gs

12列:单元格宽60px;

16列: 40px;

24列: 20px;

每个单元格两边都有10px的margin值;

引入: 960.css(网格)
resrt.css(清除样式)
text.css(样式重置)

类名

.container_num(12/16/24) 主容器; 自动居中
.grid_num(1-12/1-16/1-24) 网格类; 代表元素应占num个网格
.clear 清除上一行的网格对下一行元素的影响;
.alpha 清除元素左边的margin值;
.omega 清除元素右边的margin值;
.pull_num 将元素向左拉num个网格;
.push_num 将元素想右推num个网格;
.prefix_num 在元素前面加num个网格的padding-left;
.suffix_num 在元素后面加num个网格的padding-right;