css布局定位、浮动、flex。

1.定位（position）

      在css定位又可分为三种：既相对定位、决定定位、固定定位。这三种都是不同方式定位。其中两个绝对定位和固定定位都会脱离文档流。定位的位置有四个方位：上下左右，进行偏移。

• position: relative 相对定位的参考则不同，它会以自身为中心进行偏移，并且它不会脱离文档流。
• position: absolute 绝对定位的位置会参考父级有定位的元素作为参考，如果父级既以上元素都没有定位会以祖先元素body作为参考。
• position:fixed 固定定位以浏览器的视口进行参考位移。
• position:static 无定位，默认值

如果有多个定位会有覆盖效果，我们可以使用z-index属性设置层级，值为数字越大层级越高

---

2.浮动（Float）

1.首先认识文档流

元素在文档流中的特点：

块元素：在文档流中会独占一行，块元素会自上向下排列，不设置宽度默认继承父元素宽度

行内元素：在文档流中只占自身的大小，会默认从左向右排列

2.浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的元素可以向左或向右移动，不在区分行内元素或块元素。并且会紧挨一起。没有空白间隙

语法：

   选择器{

                float：left； //left表示左浮动，right表示右浮动

        }

浮动的缺点：会有高度塌陷的问题，既高度不会被内容撑开。我们通常使用伪元素选择器来清除浮动

.clear:after{

         content: "";

        display: block;

        height：0；

        clear:both；

 }

---

3.弹性盒子（Flex box）

1.布局方向flex-direction

属性值	含义
row	默认值，主轴起点在左端，从左到右排列
row-reverse	主轴为水平方向，主轴起点在右端，从右到左排列
column	主轴为垂直排列，起点在上，从上往下排列
column-reverse	主轴为垂直排列，起点在下，从下往上排列

2.换行显示flex-wrap

属性值	含义
no-wrap	默认值，不换行
wrap	换行
wrap-reveres	换行，第一行在下方

3.主轴对齐方式justify-content

属性值	含义
flex-start	默认值，左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔相等
space-around	项目两侧的间距相同，项目之间的间距比两侧的间距大一倍

4.交叉轴align-items

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

 5.轴线对齐方式align-content

定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用.

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

6.弹性盒子项目属性

（1） 排列顺序order项目的排列顺序，数字越小排列越靠前，默认为0。

（2）flex-grow设置项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

（3）缩小比例flex-shrink设置项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

（4）flex符合属性

        flex属性是 flex-grow、flex-shrink、flex-basis 的缩写，默认值为0，1，auto。

（5） 设置单个项目：align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，

stretch	沿着交叉轴方向自动进行拉升到最大。
auto	表示继承容器的 align-items 属性。（默认值）
flex-start	沿着交叉轴方向 起点 对齐。不设置align-items（默认值）
flex-end	沿着交叉轴方向 结尾 对齐
center	沿着交叉轴方向 居中 对齐
baseline	沿着交叉轴方向，按照项目内的文字对齐