float\flex\绝对定位的区别及试用场景
float\flex\绝对定位的区别及试用场景
绝对定位absolute
讲到绝对定位先来说说定位position（定位用于位置的改动）
relative：相对定位，仍在文档流之中（其他的元素不变），参照物相对于原来的位置进行定位。会压在其他的元素上面。作用是为绝对定位元素提供参照物。
absolute：绝对定位，脱离文档流（后续元素会在绝对定位元素的前序元素的后面），默认宽度是内容宽度，参照物是第一个定位的祖先/根元素或者外层元素（根元素是html元素），如果祖先没有定位元素，那么会导致其参照物是body。
注：absolute生成绝对定位的元素，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
（应用场景：比如轮播图，通过相对定位——背景图和绝对定位——标题、轮播按钮结合）
fixed：固定定位，脱离文档流，默认宽度是文本宽度，参照物是视窗（我觉得可以认为是浏览器可视范围），假如其bottom:0px，浏览器上下有滚动条——html高度大于浏览器可视范围高度，那么这个元素将一直位于浏览器可视范围的底部（而不是html的最底部））。（IE6不兼容）（多用于手机网页/App）
应用场景：固定顶栏（无论怎么滚动，都在浏览器的上方，同理也有底栏）；
浮动float
（解决左右排版的问题）
值：
left 向左浮动
right 向右浮动
特点：
默认宽度——内容宽度（但可以通过width和height设置）；
脱离文档流；
向指定方向一直移动（根据值），移动到不能移动为止
使用float后，父元素没有高度，页面会变乱，为了排版整齐，所以要清除浮动：
1.让父元素有高度 常用ul:after{content:”“;display:block;clear:both;}
2.给父元素设置高度如：
注：浮动元素在文档流的上一层，要给展示的内容留有一定的空间//效果是造成假象（利用视角差）
利用margin、padding可对其位置进行调整
弹性flex
一：有六个属性设置在box父容器上，来控制子元素的显示方式；分别是：
flex-direction 设置主轴对齐方式 默认 row x轴从左到右；
flex-wrap 子元素换行的方式 默认nowrap ；
flex-flow flex-direction和flex-wrap的简写 默认row nowrap；
justify-content 子元素的对齐方式 默认flex-start 左对齐
align-items
align-content
1、flex-direction 决定主轴的对齐方向，分别有四个属性：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
- flex-wrap ：定义子元素超过一行，如何换行，分别有三个属性：
nowrap（默认值）：默认不换行。
wrap：换行，第二行在第一行下面，从左到右
wrap-reverse：换行，第二行在第一行上面，从左到右；
2.1 nowrap：不换行，如果子元素超过父元素的宽度或者高度，会自动在主轴方向压缩
3. flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row nowrap
flex-flow：flex-direction|flex-wrap ；
- justify-content: 子元素在主轴对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5 align-items：交叉轴如何对齐，如果flex-direction：row和row-reverse 那么交叉轴就是y轴，如果是column和column-reverse那么交叉轴是x轴
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
二 有六个属性设置在子元素项目上：
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1. order 子元素排列的位置默认是按照html先后顺序来排列的，html结构谁在前面默认就排列在前面；order的作用就是改变子元素排列顺序 order：默认（0） 值越小越靠前
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是一样的。