body跟页面后默认8px的间距

过渡

1.定义

css属性允许某个或多个属性，从一个状态改变到另外一个状态的过程中，慢慢地，圆润地发生改变。可以产生一定的动画效果。
例如：将div从原本的left属性为0的状态改变到left为300的状态，中间过程可以慢慢的进行。

<style>
    .box{
        width: 500px;
        height: 200px;
        border: 1px solid #000;
        position: relative;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        left: 0;
        top: 0;
        transition: left 2s ease;
    }
    .box:hover .box1{
        left: 300px;
    }
</style>
<div class="box">
    <div class="box1"></div>
</div>

效果如下：

2.语法

（1）单独写

a:transition-property:css属性名称;

表示要产生过渡效果的css属性，<br />
多个属性使逗号隔开<br />
如果属性过多，直接使用all来表示所有属性

b:transition-duration:数字s

表示完成过渡所需要的时长<br />
`s` 是秒 second 的表示

c:transition-timing-function:速度方式

取值：`linear` 匀速<br />
      `ease` 逐渐减速，一开始速度比较快<br />
      `ease-in` 逐渐加速<br />
      `ease-out` 逐渐减速，一开始没有`ease`快<br />
      `ease-in-out`先加速后减速<br/>
      专门用于设计速度方式的贝塞尔曲线<br />
      `steps(5)` 分步骤动画<br />

各种取值的效果展示 贝塞尔曲线网址：web.chacuo.net/css3beziert…

d:transition-delay:数字s; 表示延迟多少秒执行过渡效果

（2）复写

transition: transition-property transition-duration (transition-timing-function transition-delay);

3.注意事项

display 没有过渡效果 ，想要实现属性的隐藏和显示 可以用 透明度opaciity来替代