布局方法

一、浮动与定位

二、弹性盒子

——最好加指定浏览器前缀
将父元素指定为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;