css是层叠样式表，它是表现在html或xml中文件的计算机语言，使内容和表现分离开来，使其更具有页面控制和灵活性，css不仅可以装饰静态网页，还可以配合各种脚本使各元素格式化。
我们可以经过一些css属性，来把这页面变得更加美观。
接下来开始正题，给大家介绍一下今天的四个主人公：
动画：
动画就是·在你的页面中添加一个元素，给这个元素加上动画效果，他就可以自行进行改变样式，
优点：
能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。
动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。
让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。
如何创建：
创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现。
关键帧使用 <percentage> 来指定动画发生的时间点。0% 表示动画的第一时刻，100% 表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from 和 to。这两个都是可选的，若 from/0% 或 to/100% 未指定，则浏览器使用计算值开始或结束动画。
@keyframes 自己定义的名字 { 初始值 {初始值的属性} 结尾值 {结尾值得属性} }
一个完整的动画：
把一个红色的块变成一个黄色的块
div { width:100px; height:100px; background:red; animation:myfirst 5s; } @keyframes myfirst { from {background:red;} to {background:yellow;} }
过渡：
过渡就是·在你的页面中添加一个元素，给这个元素加上过渡效果，他就可以进行改变样式，他和动画不一样的是，过渡需要通过鼠标放在需要改变的样式上时，他才会发生改变。
优点：
CSS 过渡可以决定哪些属性发生动画效果（通过明确地列出这些属性），何时开始（通过设置延时），持续多久（通过设置时长）以及如何动画（通过定义缓动函数，比如线性或先快后慢）。
如何创建：
CSS 过渡通常使用简写属性 transition 控制。这是最好的方式，可以避免属性值列表长度不一，节省在 CSS 代码上调试的时间。
指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其他属性仍如通常那样瞬间变化。指定过渡的时长。你可以为所有属性指定一个值，或者指定多个值，或者为每个属性指定不同的时长完整的过渡：
把一个蓝色的块，过渡成一个旋转了180度的粉色块，粉色块变大
.box { border-style: solid;//实现边框 border-width: 1px;//边框的宽 display: block;//块级 width: 100px;//原来的宽 height: 100px;//原来的高 background-color: #0000ff;//原来的颜色 transition: width 2s,//宽的过渡时间 height 2s,//高的过渡时间 background-color 2s,//颜色的过渡时间 rotate 2s;//旋转过渡的时间 } .box:hover { background-color: #ffcccc;//过渡完成后的颜色 width: 200px;//过渡完成后的宽 height: 200px;//过渡完成后的高 rotate: 180deg;//过度要旋转的多少 }
定位：
定位分为很多种，静态定位、相对定位、绝对定位、固态定位、粘性定位，各有各的用法
静态定位：
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
.选择器{ position：static； }
相对定位：
相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局，在标准文本流中移动后，原来位置会保留空白。
1. .选择器{ 2. position：raletive; 3.
绝对定位：
绝对定位的元素的位置相对于最近的已定位父元素，会脱离文本流，如果元素没有已定位的父元素，那么它的位置相对于<html>，一般配合相对定位使用（子相父绝）。
.选择器{ position：absolute; }
固定定位：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动，会脱离文本流。
.选择器{ position：fixed; }
适合用于导航栏，如果用做底部导航栏
.选择器{ position：fixed; bottom：0； }
如果用作顶部导航栏：
.选择器{ position：fixed; top：0； }
粘性定位：
基于用户的滚动位置来定位，粘性定位的元素是依赖于用户的滚动，在 相对定位 与 固定定位定位之间切换，它的行为就像 相对定位 而当页面滚动超出目标区域时，它的表现就像 固定定位，它会固定在目标位置，元素定位表现为在跨越特定属性值前为相对定位，之后为固定定位。这个特定属性值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个属性值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
.选择器{ position：fixed; }
合适运用好定位可以是我们的页面更加美观。
浮动：
CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻在这里
.选择器{ float：（top。bottom，left，right）； }
浮动运用的多了，会导致页面崩塌。
希望我的这些见解可以给大家带来帮助，我也是一只小白，刚刚入门，如果有什么不对的地方请，各位大神给我指点一番。同时也感谢大家来观看我的博客！
