Seventh(11.27~12.3)

定位

相对定位

position:relative;

相对于原来的位置（以自己的左上角为基点），不脱离标准文档流（元素排版布局过程中，会默认自动从左往右，从上往下的排列方式，自上而下分成一行行，并在每行中从左到右排放元素）。

不添加相对定位时

 添加相对定位时

绝对定位

 position:absolute;

绝对定位经常发生在父子关系中，脱离标准文档流，不保留原本的位置。

无父亲或者父亲无定位

父亲无定位

因为父元素中没有定位，所以设置定位的子元素会向上查找，直到找到有定位的父元素，也就是特面，所以上图呈现出来的子元素是相对于页面偏移的。

 父亲有定位

给父元素设置一个相对定位，父元素相对于原来位置移动的同时，此时设有绝对定位的子元素就不是相对于页面而是相对于父元素移动的了。

固定定位

 position:fixed;

当给一个元素设置固定定位的时候，随着鼠标的滚动，该元素不会移动，就如同固定在上面了。

比如有些在网页上的悬浮框。

另外，如果加入别的块占据了该块的固定位置，原来的就会环绕这个块分布。

粘性定位

position:sticky;

使用粘性定位时，父元素不能用overflow:hidden;

父元素的高度不能低于sticky元素的高度，sticky元素只在父元素内生效。

 静态定位

position:static;

自动定位（默认定位方式）

就是各个元素在HTML文档流中默认的位置。

在静态定位状态下，无法通过偏移属性（left,right,top,bottom）来改变元素的位置。

一般用来清除定位。

flex布局

常用父项属性

flex-direction:设置主轴的方向

justify-content:设置主轴上子元素排列方式(水平)

align-items:设置侧轴子元素排列方式（单行）

align-content:设置侧轴子元素排列方式（多行）

flex-wrap：设置子元素换行

flex-direction

属性值

row：默认值从左到右

row-reverse:从右到左

column:从上到下

column-reverse:从下到上

justify-content

center:在主轴居中对齐

flex-wrap

默认情况下都排在一条线上

nowrap:默认值，不换行

wrap:换行

align-items

center:挤在一起，垂直居中

align-content

center:在侧轴中间显示