盒子模型：
边框：border。 内边距：padding。 外边距：margin。
在css中一个盒子模型由content（内容）、border、padding和margin组成。
border的属性有三个：color、width（粗细）和style（样式）。
style属性：none、hidden、dotted（点状的）、dashed（虚线）、solid（立体的）、
double、groove（凹槽）、ridge（脊状）、inset、outset。
盒子的定位：
盒子的定位是由position来实现的。
position有四个属性值：
1，static：这是默认的属性值，也就是该盒子按照标准流进行布局。
2，relative：称为相对定位。
3，absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位盒子从标准流中脱离。
4，fixed：称为固定定位，以浏览器窗口为基准进行定位。
一、以下代码为relative（相对定位）：
<html>
<head>
<title>relative属性</title>
<style type="text/css">
body{
margin:20px;font-family:Arial;font-size:18px;}
#father{
background-color:blue;padding:15px;border:1px dashed #000000;}
#block{
background-color:red;padding:10px;border:1px dashed #000000;position:relative;left:30px;top:30px;}
</style>
</head>
<body>
<div id="father">
<div id="block">Box-1</div>
</div>
</body>
</html>
left：30px的作用是使Box-1的新位置在原来左边框30像素的地方。
相对定位的结论：
1，使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。
2，使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。
二、以下代码为absolute（绝对定位）：
<html>
<head>
<title>absolute属性</title>
<style type="text/css">
body{
margin:20px;font-family:Arial;font-size:18px;}
#father{
background-color:#a0c8ff;padding:15px;border:1px dashed #000000;}
#father div{
background-color:#fff0ac;padding:10px;border:1px dashed #000000;}
#block{
position:absolute;top:0;right:0;} <!--控制路径：以浏览器窗口为基准-->
</style>
</head>
<body>
<div id="father">
<div>Box-1</div>
<div id="block">Box-2</div>
<div>Box-3</div>
</div>
</body>
</html>
并不是所有的绝对定位都是以浏览器窗口为基准来定位的，对以上代码的父div增加一个定位样式：
#father{
background-color:#a0c8ff;padding:15px;border:1px dashed #000000; position:relative;}
则此时以他的父div为基准来定位。
绝对定位结论：
1，使用绝对定位的盒子以他的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已定位的祖先，则以浏览器窗口为基准进行定位。
2，绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没影响，其它盒子就好像这个盒子不存在一样。
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
