蓉儿

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://lovelyrosa.blogbus.com/logs/17043498.html

网页布局与定位

1.1认识div

div就象一个表格布局的容器，用于网页搭建框架时的浮动与定位。
为了实现内容与表现分离，最好只使用以下两种形式：

<div id="id名称">[...]</div>

<div class="class名称">[...]</div>

div可以并列与嵌套，用这两种形式来完成页面布局。

滥用div是不合理的，应该选用特定的标签来替代div，这样可以简化代码，实现更好的识别和控制。

1.1.1布局

一、一列固定宽度

<div id="layout"></div>

#layout{......} ／＊相关属性＊／

属性：默认状态下div将占据整行空间，可以通过width：100px定义长度为100像素，也可以通过width：80％适应调整宽度为浏览器窗口的80％。

通过margin可以实现一列宽度居中：

margin:0px auto;  /*0px代表上下边距，auto让浏览器自动判断左右边距相等*/

二、两列固定宽度

浮动（float)用来设置对象之间的动态的显示，根据具体的浮动方式使得每个对象之间及浏览器窗口之间建立起某种联系，达到自动调节页面布局的效果。可用值：none（不浮动），left(左浮动）right（右浮动）。

两列宽度自适应：#left{...;width:20%;...}    #right{...;width:70%;...}

两列右宽度自适应（左宽度同理）： #left{...;width:100px;...}    #right{...}

两列固定宽度居中：使用div嵌套

三、三列浮动宽度中间宽度自适应

使用position属性的absolute值来绝对定位（top,right,left.right)，不会受其他对象的浮动影响。

 1.1.2盒模型

三个属性：内边距（padding），外边距（margin），边框（border）。

再不同的浏览器下存在差异：

IE6/IE7/Firefox的最终宽度：左外边距＋左边框宽＋左内边距＋宽度＋右内边距＋右边框宽＋右外边距 

IE5:左外边距＋宽度＋右外边距