首页 > 代码库 > 使用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布局页面