css盒子模型

用CSS来排版网页，即用DIV编排网页结构，由此会接触到一个知识点----CSS的盒子模式。

盒子模式具备的属性：内容(content)、填充(padding)、边框(border)、边界(margin)


一般盒子模型的width属性只包括content 部分。

IE 盒子模型的width属性包括了content、border 和 padding部分。
  值得注意的是：IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
    宽度width = 自身宽度content+左内边距+右内边距+左边框+右边框
    高度height = 自身高度content+上内边距+下内边距+上边框+下边框

**盒子的浮动：
一个div范围是由它里面的标准流内容决定的，与它里面的浮动内容无关。
此时若希望浮动内容被父div包含，可在浮动内容后清除浮动。

关于相对定位：（position:relative）
使用相对定位的盒子，会相对它原本的位置偏移指定的距离，而对其父块和兄弟块没有任何影响。

关于绝对定位：（position:absolution）
使用绝对定位的盒子以它最近的一个已经定位的（即设置了position属性）祖先元素为基准进行指定的偏移，而对其后面的兄弟盒子无影响，对于其他盒子该盒子如同不存在。
如果设置了绝对定位，而未设置偏移属性，则它仍将在原来的位置。

设计导航菜单时便遇到盒子的浮动这个问题啦~


扩展：http://www.52css.com/article.asp?id=376
http://www.zhiwenweb.cn/Category/Website/1131.htm