<head>
<style type="text/css">
.main
{
height:42px;
width:100%;
text-align:center;}
</style>
<title>class选择器</title>
</head>
<body>
<div class="main">
</div>
</body>
</html>
<head>
<style type="text/css">
#main
{height:42px;
width:100%;
text-align:center;
}
</style>
<title>id选择器</title>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<head>
<title>格式与布局position：absolute</title>
<style type="text/css">
.b
{border:5px solid blue;
width:100px;
height:100px;
background-color:#0F3;
right:50px;
bottom:20px;
position:absolute;相对于外层边框
}
.c
{border:2px solid red;
width:400px;
height:200px;
}
</style>
<style type="text/css">
.d
{border:2px solid red;
width:400px;height:200px;position:absolute;
}
</style>
</head>
<body>
<div class="c">c没有
<div class="b">b
</div>
</div>
<div class="d">d有
<div class="b">2b
</div>
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
#a
{border:5px solid blue;width:100px;
height:100px;margin:10px;background-color:#0F6;
position:fixed;锁定位置相对于游览器
z-index:2;分层，层数越高越考上
}
#aa
{border:5px solid blue;width:100px;
height:100px;margin:10px;background-color:#0F6;
left:20px;top:50px;position:relative;相对于默认位置的移动}
</style>
</head>
<body>
<div id="a">
a</div>
<div id="aa">aa</div>相对于a移动
</body>
</html>
原文：http://www.cnblogs.com/hanke123/p/4957678.html