使用Div + CSS布局页面

在设计网页时，能够控制好各个模块在页面中的位置是非常关键的。本章将讲解利用Div+CSS对页面元素进行定位的方法。

Div是HTML中指定的专门用于布局设计的容器对象

Div是CSS布局的核心对象。

Div本身与样式没有任何关系，样式需要编写CSS来实现，因此Div对象应该说从本质上实现了与样式的分离。（最终样式由CSS来完成）

无论是多么复杂的布局方法，都可以使用Div之间的并列与嵌套来实现。

为了实现内容与表现的分离，不应当将align对齐属性与style行间样式表属性编写在Div标签中，因此，Div代码只可能有以下两种形式：

　　　　　　<div id="id 名称">内容</div>

　　　　　　<div class="class 名称">内容</div>

CSS布局定位

　　　　CSS排版首先将页面在整体上进行<Div>标记的分块，然后对各个块进行CSS定位，最后在各个块中添加相应的内容。通过CSS排版的页面，更新

　　十分容易，甚至是页面的拓扑结构，都可以通过修改CSS属性来重新定位。

　　1. 浮动定位

　　　　　　浮动定位是CSS排版中非常重要的手段。

　　　　　　浮动的框可以左右移动，直到其边缘碰到包含框或另一个浮动框的边缘。

　　　　　　　　　　属性：float　　　　　　可用值：none / left / right

　　　　　　浮动定位会有一些特殊情况（包含框无法容纳……）

　　2. position定位

　　　　　　position指定块相对于其父块的位置和相对于它自身应该在的位置。

　　　　　　　　　　属性：position

　　　　　　　　　　可用值：

　　　　　　　　　　　　　　relative　　　　相对　　　　对象不可层叠（在正常文档流中偏移位置）

　　　　　　　　　　　　　　absolute　　　 绝对　　　　其层叠通过 z-index 属性来定义（将对象从文档流中拖出）

　　　　　　　　　　　　　　fixed　　　　   悬浮　　　　使元素固定在屏幕的某个位置（不随滚动条的滚动而滚动）

　　　　　　1. 相对定位：

　　　　　　　　　　无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致覆盖其他框。

　　　　　　2.绝对定位：

　　　　　　　　　　绝对定位使元素的位置与文档流无关，因此不占据空间。

　　　　　　　　　　简单地说，使用了绝对定位之后，对象就浮在网页的上面了。（z-index属性的值越大，框在堆中的位置就越高）

　　　　　　3.悬浮定位：

　　　　　　　　　　本质上与将其设置为absolute一样，只不过块不随着浏览器的滚动条向上或乡下移动。

　　　　对于定位的主要问题是要记住每种定位的意义。相对定位是相对于元素在文档流中的初始位置，而绝对定位是相对于最近的已定位的父元素（如果不存在

　　已定位的父元素，那就相对于最初的包含块）

　　　　因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。