第三周工作总结

本周主要学写的是css的浮动和过渡。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

上述代码让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。

过渡则用到的是transition。

分别为：transition-property （规定应用过渡的 CSS 属性的名称）

              transition-duration （定义过渡效果花费的时间。默认是 0）

              transition-timing-function  （规定过渡效果的时间曲线。默认是 "ease"）
              transition-delay  （规定过渡效果何时开始。默认是 0）

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; 
-webkit-transition: width 2s; 
-o-transition: width 2s; 
}

注意： 如果时长未规定，则不会有过渡效果，因为默认值是 0。