css+div⽹页设计（⼆）--布局与定位
在⽹页设计中，能否控制好各个模块中在页⾯中的位置是⾮常关键的，与传统的表格定位不同，css+div定位⽅式更加的灵活，本篇博客将为⼤家介绍css+div
的布局与定位。
⼀.盒⼦模型
由图可以看出盒⼦模型的范围包括 margin、border、padding、content。　
需要指出的⼀点是，在ie中与firefox中盒⼦模型表⽰略有不同：
IE 盒⼦模型的 content 部分包含了 border 和 pading。
⽽firefox中的盒⼦模型的content部分不包含border和padding。
⼆、元素定位
1、float定位
float为浮动的意思，在css布局中有很重要的作⽤，这⾥举⼀个例⼦。
<span ><html>
<head>
<title>float属性 clear</title>
<style type="text/css">
<!--
body{
margin:5px;
font-family:Arial;
font-size:13px;
}
.block1{
padding-left:10px;
margin-right:10px;
float:left;    /* 块1向左浮动 */
}
h3{
background-color:#a5d1ff; /* 标题的背景⾊ */
border:1px dotted #222222; /* 标题边框 */
clear:left;    /*清除float对左侧的影响 */常用css布局
}
-->
</style>
</head>
<body>
<div class="block1"><img src="building2.jpg" border="0"></div>
<div>对于⼀个⽹页设计者来说，HTML语⾔⼀定不会感到陌⽣，因为它是所有⽹页制作的基础。但是如果希望⽹页能够美观、⼤⽅，并且升级⽅便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的⾓⾊。本章从CSS的基本概念出发 <h3>CSS的概念</h3>
<div>CSS（Cascading Style Sheet），中⽂译为层叠样式表，是⽤于控制⽹页样式并允许将样式信息与⽹页内容分离的⼀种标记性语⾔。</div>
</body>
</html></span>
此时结果
如果将float:left注释掉结果如下：
2、position定位
a、position:static|⽆定位
position:static是所有元素定位的默认值, ⼀般不⽤注明，除⾮有需要取消继承的别的定位
<span >#div-1 {
position:static;
}</span>
b、position:relative|相对定位
使⽤position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。
如果要让div-1层向下移动20px，左移40px:
<span >#div-1 {
position:relative;
top:20px;
left:40px;
}</span>
c、position:absolute|绝对定位
使⽤绝对定位的层前⾯的或者后⾯的层会认为这个层并不存在，丝毫不影响到他们。
三、z-index定位：
z-index属性⽤于定位重叠时的上下位置。
<span ><html>
<head>
<title>z-index属性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:20px;
top:30px;
z-index:1;    /* ⾼低值1 */
}
#block2{
background-color:#ffc24c;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:40px;
top:50px;
z-index:0;    /* ⾼低值0 */
}
#block3{
background-color:#c7ff9d;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:60px;
top:70px;
z-index:-1;    /* ⾼低值-1 */
}
-
->
</style>
</head>
<body>
<div id="block1">AAAAAAAA</div>
<div id="block2">BBBBBBBB</div>
<div id="block3">CCCCCCCC</div>
</body>
</html></span>
结果如下：
以上为css+div的布局与定位，下篇博客我将为⼤家介绍，css与javascript，css与jquery，css与ajax的混合运⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。