《CSS与页面布局》PPT课件

4、中出现的顺序进行显示。5.2.1框模型例子：box1.htm例2：元素之间可以互相包含，矩形框之间也可以互相包含。5.2.1框模型例子：box2.htm5.3.1相对定位相对定位可以用于小幅修改某个元素的位置，使其显示在新位置上，即相对于正常流情况它应该出现的位置，通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。使用position:relative属性，加上left,right,top属性可以实现相对定位功能。如果将top设置为20px，那么框将在原位置顶部下面20像素的地方。如果left设置为30像素，那么会在元素左边创建30像素的空间，也就是将元素向

5、右移动。5.3css定位概述#mybox{position:relative;left:30px;top:20px;}5.3.1相对定位注意:在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。绝对定位：用于某个元素在浏览器窗口中的确切位置(即绝对像素素位置)。绝对定位使元素的位置与文档流无关，因此不占据空间，普通文档流中的其它元素的布局就象绝对定位的元素不存在时一样。设置它用position:absolute属性，加上left、top属性。5.3.2绝对定位#box_absolute{position:absolute;le

6、ft:30px;top:20px;}5.3.2绝对定位5.3.2绝对定位注意：对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档流中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么是最初的包含块。（可能html元素是最初的包含块）例子：abs.htm浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。使用float属性来实现元素的浮动Float:left/right5.3.3浮动5.3.3浮动右浮动：

7、请看下图，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：5.3.3浮动左浮动：当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。5.3.3浮动如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。5.3.3浮动如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它