双创中心第一回

本周我们进行小米官网的HTML制作，收获有很多，主要有以下几点：

1、我在制作中用到定位有俩种：绝对定位 absolute   相对定位 relative

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样

相对定位 是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
         绝对定位会找到与自己最近的父类来定位，不是自己的父类与自己无关。

 相对定位找到了自己的父类之后，要看这个父类是否进行了相对定位，没有相对定位的话就不会找这个父类来定位。

 绝对定位会寻找一个 距离自己最近的 父类 ，并且这个父类进行了相对定位，那么这个盒子就会找这个已经有了相对定位的父类来定位。

2、css3的动画很强大，我们还用的不是太熟，不多这几个经常用动画跟过渡

     过渡：

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}

动画：

如需在 CSS3 中创建动画，要用到 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}