flex,float,绝对定位应用总结

1.绝对定位absolute

1.相对定位：relative

使用后仍在文档流中，参照物相对于原来的位置进行定位，会压在其他的元素上面	
作用：为绝对定位提供参照物

2.绝对定位：absolute

使用后脱离文档流，后续元素会在绝对定位的前序元素的后面，默认宽度是内容宽度，
参照物是第一个定位元素的根元素或者外层元素，如果根元素没有定位元素，那么参照物
是body。（实际应用：轮播图，通过相对定位背景图和绝对定位标题，轮播按钮结合）

3.固定定位：fixed

脱离文档流，默认宽度是文本宽度，参照对象：浏览器窗口
（实际应用：固定顶栏，广告等）

二.浮动：float

1.作用：解决左右排版

float：left/right 	向左/右浮动

2.特点：脱离文档流，向指定方向移动（left/right）

3.清除浮动：

使用浮动后，父级元素没有高度，页面会坍塌，清楚浮动能解决这个问题
只需要给浮动内容的父级添加一个类名即可。

.clearfix:after{
	content:"";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}

三.弹性flex布局

一.有6个属性设置在box父级容器上，来控制子元素的显示方式：

1.flex-direction 设置主轴对齐方式，有四个属性

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴水平，起点在右。
column：主轴垂直，起点在上。
column-reverse：主轴垂直，起点在下。

2.flex-wrap 子元素换行的方式，有三个属性

nowrap（默认值）：默认不换行（如果子元素超过 父元素的宽度或者高度会自动在主轴方向压缩）
wrap：换行，第二行在第一行下面，从左往右。
wrap-reverse：换行，第二行在第一行 上面，从左往右。

3.flex-flow (flex-direction和flex-wrap)的简写 默认row nowrap

4.justify-content 子元素在主轴对齐方式

flex-start（默认值）：左对齐。
flex-end：右对齐。
center：居中。
space-between：两端对齐，项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍

5.align-items 交叉轴如何对齐：如果flex-direction：row和row-reverse 那么交叉轴就是y轴 如果是column和column-reverse那么交叉轴是x轴

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-start：交叉轴的起点对齐。 
flex-end：交叉轴的终点对齐。 
center：交叉轴的中点对齐。 
baseline: 项目的第一行文字的基线对齐。

6.align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

stretch（默认值）：轴线占满整个交叉轴。
flex-start：与交叉轴的起点对齐。 
flex-end：与交叉轴的终点对齐。 
center：与交叉轴的中点对齐。 
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 

二：有六个属性设置在子元素项目上:

1.order子元素排列的位置默认是按照html先后顺序来排列的，html结构谁在前面默认就排列在前面；order的作用就是改变子元素排列顺序order：默认（0） 值越小越靠前

2.flex-grow 比例放大，默认是0，当前放大空间的时候，值越大，放大的比例越大 flex-grow:0

3.flex-shrink 缩小比例，默认是1，值越大，缩小的时候比例越小

4.flex-basis 属性定义了再分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，即项目的本来大小。

5.flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

6.align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

除了auto是表示继承父元素，其他的跟align-items是一样的。
（原作者地址）