摘要:
2.2.4 浮动最后一种定位模型是浮动模型。浮动的框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。如图2-13所示,当把框1向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘。图2-13 向右浮动的元素在图2-14中,当把框1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框2,使框2从视图中消失。如果把所有三个框都向左浮动,那么框1向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。图2 阅读全文
摘要:
2.2.2 相对定位相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。如果将top设置为20像素,那么框将出现在原位置顶部下面20像素的地方。如果将left设置为20像素,那么会在元素左边创建20像素的空间,也就是将元素向右移动(见图2-10)。#mybox { position relative; left: 20px; top: 20px; }图2-10 对元素进行相对定位在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框。2.2.3 绝对 阅读全文
摘要:
2.1.2 空白边叠加空白边叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,当两个垂直空白边相遇时,它们将形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中的较大者。当一个元素出现在另一个元素上面时,第一个元素的底空白边与第二个元素的顶空白边发生叠加(见图2-4)。图2-4 元素的顶空白边与前面元素的底空白边发生叠加当一个元素包含在另一个元素中时(假设没有填充或边框将空白边分隔开),它们的顶和/或底空白边也发生叠加(见图2-5)。图2-5 元素的顶空白边与父元素的顶空白边发生叠加尽管初看上去有点儿奇怪,但是空白边甚至可以与本身发生叠加。假设有 阅读全文