absolute和float高尔基，CSS深入理解之absolute教程-慕课网

index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>absolute和float高尔基</title>
<style>
body {
    background-color: #B0DEF5;
	font-size: 14px; font-family: arial;
	color: #444;
}
a {
	color: #0078b6;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
em {
	font-style: normal;
	color: #aeaeae;
	margin: 0 5px;
}
svg {
	position: absolute;
}
.container {
	width: 560px; height: -webkit-calc(100vh - 16px); height: calc(100vh - 16px);
	margin-left: auto; margin-right: auto;
	background-color: #fff;
}
.list {
	padding: 20px;
	position: relative;
}
.space {
	padding-left: 60px;
	line-height: 22px;
}
.space img {
	vertical-align: text-bottom;
}
.info {
	font-size: 12px;
	overflow: hidden;
	color: #808080;
}
.from {
	float: left;
}
.from a {
	color: #9abbc8;
}
p {
	margin: 6px 0;
}
.operate {
	float: right;
}
.operate img {
	vertical-align: text-bottom;
	margin-right: 3px;
}
.test {
	position: relative;
	font-size: 18px; font-family: 'microsoft yahei';
}
.test p {
   width: 200px;
   margin-left: auto; margin-right: auto;
   padding: 5px;
   background-color: #f0f0f0;	
}
.test input {
	width: 20px; height: 20px;
	vertical-align: -4px;
}
</style>
</head>
 
<body>
<div class="container">
	<svg xmlns="http://www.w3.org/2000/svg" width="520" height="360">
		<path d="M45 80C45 280,45 320,165 300" stroke-width="1" stroke="#444" fill="none"></path>
	</svg>
	<div class="list">
    	<a href="#" id="avatar" class="avatar" style="float: left;"><img src="http://img1.sycdn.imooc.com//54447ac70001f5cc00500050.jpg"></a>
        <div class="space">
            <a href="//weibo.com/mukewang" target="_blank" title="慕课网">慕课网</a>
            <img src="http://img1.sycdn.imooc.com//54447b1a0001750000160013.png">
            <a href="http://huati.weibo.com/k/%E6%85%95%E8%AF%BE%E7%BD%91%E6%B4%BB%E5%8A%A8?from=501">#慕课网活动#</a>【全民晒课ing，火速赢取IT图书】无论你是慕课网的“资深粉丝”，还是刚加入的新同学，在慕课网活动帖：<a href="http://www.imooc.com/wenda/detail/30394">http://www.imooc.com/wenda/detail/30394</a> 写下你在慕课网所学习的任意一门课程，并附上课程的学习心得，就有机会赢得精品IT好书。<img src="http://img1.sycdn.imooc.com//54447cc700010dbf00220022.gif">这事很急哒，仅有2天呦。在<a href="http://huati.weibo.com/k/%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82?from=501">#程序员节#</a>送给自己一份礼物吧！<img src="http://img1.sycdn.imooc.com//54447af90001ab1c00010001.gif">
            <p><img src="http://img1.sycdn.imooc.com//54447aea0001f43301200084.jpg"></p>
            <div class="info">    
               	<span class="from">
                	<a href="#">9月13日 10:27</a> 
                    <em>来自</em><a href="#">微博 weibo.com</a>                      
                </span>
                <span class="operate">
                	<a href="javascript:" title="赞"><img src="http://img1.sycdn.imooc.com//54447c350001055b00120013.png">(4)</a><em>|</em>
                    <a href="javascript:">转发(5)</a><em>|</em>
                    <a href="javascript:">收藏</a><em>|</em>
                    <a href="javascript:">评论(2)</a>
                </span>
            </div>
        </div>
    </div>
    <div class="test">
    	<p><input type="radio" name="layout" id="float" checked><label for="float">float: left;</label></p>
        <p><input type="radio" name="layout" id="absolute"><label for="absolute">position: absolute;</label></p>
    </div>
</div>
<script>
var eleAvatar = document.getElementById("avatar"),
    eleFloat = document.getElementById("float"),
	eleAbsolute = document.getElementById("absolute");
 
// SVG路径以及相关动画
var elePath = document.querySelector("path"), timerPath = null;	
var funPathMove = function(end) {
	clearTimeout(timerPath);
	var d = elePath.getAttribute("d"), arrD = d.split(" ");
	// 动画起始值
	var start = arrD.slice(-1) * 1;
	if (start == end) return;
	// 速率
	var rate = 5, current = start;
	console.log(arrD);
	var step = function() {
		if (Math.abs(end - current) < 1) {
			current = end;
		} else {
			current += (end - current) / 5;
			timerPath = setTimeout(step, 30);
		}
		// 替换最后一个值
		arrD.splice(-1, 1, current);
		// 曲线走起
		elePath.setAttribute("d", arrD.join(" "));
	};
	step();
};
 
if (eleAvatar && eleFloat && eleAbsolute) {
	var attrFloat = eleAvatar.style.cssFloat != undefined? "cssFloat": "styleFloat";
	eleFloat.onclick = function() {
		eleAvatar.style.position = "";
		eleAvatar.style[attrFloat] = "left";
		elePath && funPathMove(300);
	};
	eleAbsolute.onclick = function() {
		eleAvatar.style[attrFloat] = "";
		eleAvatar.style.position = "absolute";
		elePath && funPathMove(340);
	};
}
</script>
</body>
</html>
absolute和float高尔基

任务
