定位，动画，渐变，布局

定位

== 定位：position ==

相对定位

1.position:relative;相对定位
1.在使用相对定位的情况下：当没有偏移量,定位元素不发生 变换
2.根据自身位置定位
3.相对定位会占据原来位置，不脱离文档流就不会脱离文本流

决定定位

 	position: absolute;绝对定位： 
     绝对定位，脱离文档流跟文本流
      当没有父级或者父级没定位时，根据窗口定位 
      当父级有定位，根据父级定位

固定定位

 position:fixed固定定位 ：
     根据窗口定位，定位后就固定不动了 
     脱离文本流跟文档流 

粘性定位

 position:sticky粘性定位 
  粘性定位刚开始没达到阀值之前，在自己原来位置上，类似相对定位 
 当达到阀值时，变成固定定位，根据父级定位，没有父级根据窗口定位 

默认定位

 position：static默认定位 
   默认定位就是根据普通流定位 

调层级

z-index  调层级，元素必须要有定位

动画

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长
或拉伸。转换方法：
translate()、rotate()、scale()、skew()、matrix()
none 定义不进行转换。
translate(x,y) 定义 2D 平移转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值
动画 transform：translate{100px，100px}水平竖直方向上的位移
transition：0.3s 过渡时间
transform: scale(0.5)缩放为原来的0.5倍
transform: rotate(60deg)旋转，单位是度deg
transform-origin: right bottom;旋转的基准点

     动画帧： @keyframes 动画名｛from｛｝ to｛｝ ｝
     动画 animation:属性值（动画名 动画时长  贝塞尔曲线 开始时间 播放次数 ）
     Transition：all 动画秒数 ease 0s；鼠标移开动画返回

渐变

线性渐变

farthest-side:圆心到距离最远的边 
 closest-corner：圆心到距离最近的角 
 farthest-corner：圆心到距离最远的角
bbackground-image: linear-gradient(red blue)两种颜色的渐变，方向默认由上到下
background-image: linear-gradient(to right,red blue)能添加方向属性，改变渐变的颜色方向
background-image: linear-gradient( to right bottom,red,blue)添加方向属性，改变渐变的颜色方向
background-image: linear-gradient(60deg,red,blue)添加角度，60度渐变 

径向渐变：

径向渐变：background-image: radial-gradient	
重复的径向渐变：repeating-radial-gradinet()
radial-gradinet()(形状 发散方向，起始颜色，终止颜色)	
形状:ellipse（椭圆）/circle（圆形）
发散方向：属性值可以为 left、right、top、bottom、center (可组合使用)
重复渐变将属性修改为：repeating-linear-gradinet()

CSS过渡

1.表格
缺点：表格布局的标签比使用html其他布局标签数量多，占用更多的流量资源，加载速度慢，一般不推荐使用
Display:table-cell;

2.浮动
缺点： 1.对自身的影响，使用了浮动的元素可以形成块，就是说可以使行内元素拥有宽高
2.对父级的影响，造成父容器坍塌，父容器的高度为0
3.对兄弟的影响，在同行能放下的情况下，兄弟元素的布局发生了变化–>
3.定位

固定布局，使用标准px单位
流式布局，使用百分比 %
4.多列

BFC规范：块级格式化上下文

1.使用浮动
2.使用绝对定位
3.display：inline-bolck table-cells flex
4.overflow 除了 visible以外的值

BFC规范能解决的问题：

1.margin叠加问题
2.margin传值问题
3.清除浮动
4.解决覆盖问题

弹性布局

弹性盒子属性：display：flex;(适用于父类容器元素上)
display:flex
弹性布局，1.父容器变成弹性盒模型后，子元素会成为行内块元素
2.子元素在主轴上，会忽略自身宽度，自适应父容器

   flex-direction:row;默认子项沿着x轴排列，从左到右
			row-reverse  从右到左 
flex-direction:column-reverse ; y作为主轴方向，起始线是从下到上
				Column    起始线是从上到下
	flex-wrap: nowrap;默认，子项不换行。Wrap   换行 

flex-flow: row wrap;综合写法，第一个属性值是主轴方向，第二个属性值是换不换行
justify-content: center;设置主轴方向上的对齐方式
属性：space-between两端对齐
space-around分散对齐
space-evenly平均分对齐
align-items: center;设置交叉轴上的对齐方式
Align-self:flex-end设置我们的测轴的位置
Align-items：侧轴居中
align-content: flex-start;多行容器的对齐方式