布局方法

一、浮动与定位

二、弹性盒子

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