CSS定位布局，伸缩盒布局

• 定位布局

position:static/relative/absolute/fixed

• 相对定位
  position:relative;
  相对于自身的原来位置
  不脱离文档流

• 绝对定位
  position:absolute;
  相对于距离它最近的父定位元素，如果父元素中不存在定位元素，相对于浏览器（body）视口
  脱离文档流
  覆盖的层级默认z-index:0
  可以通过修改改变显示 在顶层或者底层

• 固定定位
  position:fixed;
  相对于浏览器视口，不随着页面的滚动而滚动

• 粘性定位

• relation 和absolution 实现粘性定位

• flex 伸缩盒布局
  可以理解为行内块级元素
  默认宽度100% 高度内容决定

  列级别布局
  1. 用于手机端的布局
  2. 用于后台部分布局

  分有主轴 和 交叉轴
  flex-direction:row; （默认）
  主轴为x轴，交叉轴为y轴
  一行内去放，结果：列布局
  row 必须给父元素设置宽度
  子元素默认不自动换行 flex-wrap：wrap；修改

  如果给父元素设置flex，
  子元素的宽度定宽
  且所有子元素宽度总和超过父元素的宽度，
  会自动伸缩将所有子元素平均分放下。

  给父元素加flex：1；
  是将子元素平均分

  给子元素加flex：1
  是他占子元素分数中的一份

  给子元素加flex:2
  是他占子元素得两份

flex-direction:column:
主轴为y轴，交叉轴为x轴
子元素纵向排列，上中下排列 结果行布局
默认宽度父元素100%
高度是由子元素填充得

使用方法
1. 父元素
display:flex;
伸缩盒布局

flex-direction
定义主轴
row x轴
column y轴

justify-content
定义主轴上的内容排列方式
space-around 空白环绕
space-between 左右两边顶头
flex-start
flex-end

align-items
定义交叉轴上的内容排列方式
stretch 拉伸

flex-wrap
nowrap 默认
wrap 换行（当容器无法容纳子元素的时候）

速写 flex-flow: row wrap;
flex: growp shrink basis
放大倍数 收缩倍数 指定主轴数
flex:1 2 100px;
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
份数 指定宽度 --》 指定宽度+份数比例*/

align-item 交叉轴 对对齐方式 center flex-start flex-end stretch baseline基准线

盒子居中问题
width: 1090px;
height: 100px;

1.margin:0 auto;	
2.position: relative; //absolute;
		left: 50%;
		margin-left: -545px;
		/*左一半，然后右宽度的一半*/
3.父元素{
		display: flex;
		justify-content: center;
	}

边框阴影

box-shadow
x轴 y轴 雾化面积 扩大 颜色