css七大布局方式
1. 普通布局
每个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值。比如div元素，他的默认display属性值为“block”，成为“块级元素”；而span元素的默认值为“inline”，称为“行内”元素。
2. 浮动布局
指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。float属性用于定位和格式化内容，例如让图像向左浮动到容器的文本。
浮动元素的顶部，在标准文档流的底部
对div2进行浮动：浮动元素的顶部，在标准文档流的底部
对div3和div3进行浮动：浮动元素会显示在同一行，依次排列
对div2、div3和div4进行浮动：如果宽度不够，被浮动的元素会自动换行
对div2、div4进行浮动：浮动元素的顶部，在标准文档流的底部
3. 弹性布局
Flexible Box模型，通常被称为flexbox，是一种一维的布局模型。他给flexbox的子元素之间提供了强大的空间分布和对齐能力。容器默认存在两根轴：水平的主轴和垂直的交叉轴。
1.父元素属性
row 行排布
row-reverse 同一行反向排布
column 列排布
column-reverse 同一列反向排布
2.justify-content 主轴子元素排列
flex-start 从头部排列
flex-end 从尾部排列
center 居中排列
space-around 平分剩余
space-between 两边贴边，平分剩余
3.align-items 侧轴方向，子元素的排列
flex-start 从上到下
flex-end 从下到上
stretch 拉伸（子元素去掉高度）
center 居中
4.flex-wrap属性 子元素是否换行
wrap 换行
no-wrap 不换行
5.align-content属性 子元素整体，在父元素中的对齐方式
flex-start 侧轴头部排列
flex-end 侧轴尾部排列
center 居中排列
space-around 侧轴平分空间
space-between 两侧贴边，平分剩余空间
2.子元素属性
1.flex属性（份数）
flex:1
2.align-self 属性（自己的对齐方式）
stretch 拉伸
center 居中
start 左对齐
end 右对齐
4. 定位布局
给元素设置position属性后，就可以定义该元素的top，bottom，left，right四个属性。position的值不同代表的含义也不同。
relative 相对定位：相对原来位置，偏移一定距离
absolute 绝对定位：相对于position不为static的父元素，偏移一定距离
父相子绝：父元素relative，子元素absolute
fixed 固定定位：相对浏览器定位
static 没有定位
5. 表格布局
有两种方式使用表格布局-HTML Table和CSS Table。HTML Table使用原生的标签，而CSS Table是指用CSS属性模仿HTML表格的模型。
6. 栅格布局
栅格布局将网页划分成一个个网格，可以任意组合不同的网格，作出各种各样的布局。
7. 多列布局
多列布局声明提供了一种多列组织内容的方式，正如你在一些报纸中看到的那样。
