CSS+DIV第三天

昨天前天复习了css的基础知识，昨天又学了一些布局的知识，今天是第三天，驼驼开始自己动手制作css+div排版的页面。驼驼的第一个页面制作的过程非常郁闷，中间出了无数的错误。不过，正是这些错误让驼驼看到了理论知识和实践的不同。so,驼驼总结了自己犯的错误们,虽然比较嗷嗷幼稚,总是个成长滴过程~0~,还是值得纪念的.

首先看偶写的三个css

#left{ FLOAT: left;

BACKGROUND-COLOR:#CCCCCC;
WIDTH:100px;
HEIGHT:100px;
text-align:center;
line-height:1.8em;
border-top:3px groove #ff6600;
border-left:#ff6600  dashed 3px;
border-right:#ff6600 3px solid;
border-bottom:#ff6600 3px solid;

/*margin:20px,20px,20px,20px;*/
/*word-break:break-all;*/
/*PADDING:10px,10px,10px,10px;*/
}

#center{ FLOAT: left;
width:500px;
background-color:#ff0000;
border-top:dashed 4px #ff6600;
border-left:double 3px #ff6600;
border-right:solid 3px #ff6600;
border-bottom:solid 3px #ff6600;
text-align:left;
}

#right{ FLOAT: right;
width:200px;
background-color:#ff0000;
border-top:dashed 4px #ff6600;
border-left:double 3px #ff6600;
border-right:solid 3px #ff6600;
border-bottom:solid 3px #ff6600;
text-align:left;
}

#box{
BORDER-TOP: #cccccc 2px solid;
BORDER-RIGHT: #cccccc 2px solid;
BORDER-BOTTOM: #cccccc 2px solid;
BORDER-LEFT: #cccccc 2px solid;
width:100%;
}

#fix{
width:100%;
text-align:center;
}

前台调用时的代码是这个样子滴

<div id="sample">jfskldjg</div>
<div id="box">
<div id="fix">此处演示一个相对定位的层</div>
<div id="right">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div id="left">faintshit</div>
<div id="center"></div>
</div>

如果我把#center的FLOAT: left;的left改为right  则效果就成了

yes！float是传说中的相对定位。它的参数： right|left|none  none不用说了 就是不用定位。rigth和left只是针对它上面的一个层来说的。所以才会出现上面这种情况

当然，css定位中还涉及到用position来定位。如果是平面设计的话  一般用float就好，了不起第一个div会用到position来定位，以确定初始位置，因为用float的时候我们不用用left来定义其拒页面左侧的边距  而用position的时候，则涉及到每个层都要用用left，top来定义该div与页面左侧和上侧的边距。

如果设计不仅仅局限于一个平面，也就是说我们需要立体结构的时候，就需要用到position绝对定位。

这个情况的出现是 偶把#center的width:500px;改为了width:900px;因为我们没有设置z-index，且用的是相对定位，所以出现了上图的情况，也就是说层与层之间的关系并不像表格一样，层与层之间关系是独立的。