首页 > 代码库 > 使用Div + CSS布局页面

使用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一样,只不过块不随着浏览器的滚动条向上或乡下移动。

 

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

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

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

使用Div + CSS布局页面