上一篇文章我们谈了CSS的语法、如何调试、盒模型、文档流、布局等等。接下来我们继续来说说他的定位、动画；废话不多说，我们直接步入正题。

  • CSS定位
  1. 新属性-position
  2. static默认值，待在文档流中
  3. relative

用法一：元素待在文档流中，但是展示的位置发生了变化，其实际的位置未改变

用法二：position：relative

使用场景

  • 用于做位移（基本很少用）
  • 用于做absolute元素的爸爸

配合z-index

z-index: auto默认值，不创建新的层叠上下文

z-index： 0/1/2

z-index: -1/-2

4.absolute

使用场景

  • 脱离原来的位置，另起一层。如：对话框的关闭按钮
  • 鼠标提示

鼠标提示这里可以给大家说几个小知识。

  • white-space: nowrap 文字内容不准换行
  • absolute相对于祖先元素最近的一个定位元素不是static元素定位的
  • transform translatex（-50%）居中
button span{
display: none;
}  
button:hover span{
display:inline-block;
}



5. fixed

使用场景：烦人的广告、回到顶部的按钮；配合z-index使用

  • CSS动画

动画是指许多静止的画面（帧）以一定的速度（如每秒30张）连续播放时，肉眼因视觉残像产生错觉，而误以为是活动的画面。

帧是指每个静止的画面；

播放速度：每秒24帧（影视）或者每秒30帧（游戏）

如将一个div从左往右移动，这中间会涉及到重新布局、绘制、合成；当然这要根据实际情况有可能布局、绘制会被省略。既然说到浏览器的渲染，那我们就来给他深入的学习一下！

  • 浏览器的渲染过程

（1）根据HTML构建HTML树，称DOM树；

（2）根据CSS构建CSS树，称CSSOM树；

（3）将两棵树合并成一颗渲染树；

（4）layout布局

（5）paint绘制

（6）compose合成

  • 三棵树




Compare Colleges按钮css竖着放 css按钮位置_使用场景


刚刚在渲染过程中，有提到省略某些步骤；下面我们来具体说说在什么情况下这些可以被省略。

  1. 如果您修改元素的“layout”属性，也就是改变了元素的几何属性（例如宽度、高度、左侧或顶部位置等），那么浏览器将必须检查所有其他元素，然后“自动重排”页面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。


Compare Colleges按钮css竖着放 css按钮位置_css按钮居中_02


2.如果您修改“paint only”属性（例如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，则浏览器会跳过布局，但仍将执行绘制。


Compare Colleges按钮css竖着放 css按钮位置_文档流_03


3.如果您更改一个既不要布局也不要绘制的属性，则浏览器将跳到只执行合成。


Compare Colleges按钮css竖着放 css按钮位置_使用场景_04


讲了这么多，那到底CSS动画该如何制作呢？下面以跳动的心为实列，来具体给大家阐述CSS 动画的两种做法（transition 和 animation）

JS Binjs.jirengu.com

  • transition

作用：补充中间帧

语法

  • transition：属性名 时长 过渡方式 延迟
  • transition：left 200ms linear
  • 可以用逗号分隔两个不同属性
  • transition：left 200ms,top 400ms
  • 可以用all代表所有属性
  • transition:all 200ms
  • 过度方式有：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier/setp-start/step-end/steps

注意：不是所有属性都能过渡

display: none=>block没法过渡

一般改成visibility: hidden=>visible

  • animation

两种完整语法


@keyframes slidein {
from{
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
@keyframes identifier {
0% {top: 0;left;0;}
30% {top:50px;}
68%,72% {left:50px;}
100% {top:100px;left:100px;}
}


缩写语法

animation：时长/过渡方式/延迟/次数/方向/填充模式/是否暂停/动画名；

  • 时长：1s或者100ms
  • 过渡方式：跟transition取值一样，如linear
  • 次数：3或者2.4或者infinite
  • 方向：reverse/alternate/alternate-reverse
  • 填充模式：none/forwars/backwards/both
  • 是否暂停：paused/running

以上所有属性都有对应的单独属性。