CSS-定位概述

来源：互联网发布：查看企业信息的软件编辑：程序博客网时间：2024/06/02 00:29

1. 可视化格式模型

p,h1或div等元素常常称为块级元素。这意味着这些元素显示为一块内容，即"块框"。与之相反，strong和span等元素称为行内元素，因为他们的内容显示在行中，即"行内框"。

可以使用displsy属性改变生成的框的类型。这意味着，通过将display属性设置为block,可以让行内元素(比如锚)表现的像块级元素一样。还可以通过将display属性设置为none,让生成的元素根本没有框。这样，这个框及其所有内容就不再显示，不占用文档中的空间。

CSS中有3种基本的定位机制：普通流，浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。顾名思义，普通流中元素框的位置由元素在HTML中的位置决定。

块级框从上到下一个接一个地垂直排列，框之间的垂直距离由框的垂直外边距计算出来。

行内框在一行中水平排列。可以使用水平内边距，边框和外边距调整他们的水平间距。但是，垂直内边距，边框和外边距不影响行内框的高度。同样，在行内框上设置显式的高度或宽度也没有影响。由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框。但是，设置行高可以增加这个框的高度。因此，修改行内框尺寸的唯一方法是修改行高或者水平边框，内边距或外边距。

2.相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点移动。如果将top设置为20像素，那么框将出现在原位置顶部下面20像素的地方。如果将left设置为20像素，那么会在元素左边创建20像素的空间，也就是将元素向右移动

#test{

positon:relative;

left:20px;

top:20px;

}

在使用相对定位时，无论是否移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。

3.绝对定位

相对定位实际上被看做普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置的。与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。普通流中其他元素的布局就像绝对定位的元素不存在时一样。

绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素，那么它的位置是相对于初始包含块的。根据用户代理的不同，初始包含块可能是画布或HTML元素。

与相对定位的框一样，绝对定位的框可以从它的包含块向上，下，左，右移动。这提供了很大的灵活性，你可以直接将元素定位在页面上的任何位置。

对于定位的主要问题是要记住每种定位的意义。相对定位是"相对于"元素在文档流中的初始位置，而绝对定位是"相对于"距离它最近的已定位祖先元素，如果不存在已定位的祖先元素，那么相对于初始包含快。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的叠放次序。z-index值越高，框在栈中的位置就越高。

相对于最近的已定位祖先元素来定位绝对定位的元素，能够实现一些特殊的效果。例如：假设希望让一个文本段落对准一个大框的右下角，只需对包含框进行相对定位，然后相对于这个框对段落进行绝对定位：

#branding {

width： 70em;

height: 10em;

position: relative;

}

#branding .tel{

position: absolute;

right: 1em;

bottom: 1em;

text-align:right;

}

</div>

相对于相对定位的祖先元素对框进行绝对定位，这在大多数现代浏览器中实现得很好。但是，在windows上的IE.5.5和IE6中有一个bug。如果要相对于相对定位的框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸。如果没有，那么IE会错误地相对于画布定位这个框。

固定定位

固定定位是绝对定位的一种。差异在于固定元素的包含快是视口（viewport）。这使我们能够创建总是出现在窗口中相同位置的浮动元素。例如博客评论表单采用固定定位，这使它在页面滚动时一直出现在屏幕上的固定位置。这有助于改进易用性，用户不必为了发表评论而一直滚动到页面底部。

但IE6和更低版本不支持固定定位。IE7部分支持这个属性，但是实现中有许多bug。

4.浮动

浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

当把框A向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。

当把框A向左浮动时，他脱离文档流并且向左移动，直到它的左边缘碰到了包含框的左边缘。因为他不再处于文档流中，所以他不占据空间，实际上覆盖了框B。如果把所有3个框都向左浮动，那么框A向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。如果包含框太窄，无法容纳水平排列的3个浮动元素，那么其他浮动块向下移动，直到有足够空间的地方。

如果浮动元素的高度不同，那么当他们向下移动时可能会被其他浮动元素“卡住”。

行框和清理

浮动会让元素脱离文档流，不再影响不浮动的元素。实际上，并不完全如此。如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得像浮动根本不存在一样。但是，框的文本内容会受到浮动元素的影响，会移动以留出空间。用技术术语来说，浮动元素旁边的边框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。实际上，创建浮动框是文本可以围绕图像。

要想阻止行框围绕在浮动框的外边，需要对包含这些行框的元素应用clear属性。clear属性的值可以是left,right,both或none,它表示框的哪些边不应该挨着浮动框。我以为总是认为clear属性会自动地抵消前面的浮动。但是，实际情况有意思得多。在清理元素时，浏览器在元素顶上添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面。

浮动元素脱离了文档流，不影响周围的元素。但是，对元素进行清理实际上为前面的浮动元素留出了垂直空间。

下面来看一个浮动和清理。假设有一个图片，你希望让它浮动到一个文本块的左边。你想将这个图片和文本包含在另一个具有背景颜色和边框的元素中。你可能会编写下面这样的代码：

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p{

float: right;

}

</div>

但是，因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。如何让包围元素在视觉上包围浮动元素呢？需要在这个元素的某个地方应用clear。可惜这个示例中没有现有的元素可以清理，所以需要在最后一个段落下面添加一个空元素并且清理它。

.news{

background-color: gray;

border:solid 1px black;

}

.news img {

float: left;

}

.news p {

float:right;

}

.clear{

clear:both;

}

</div>

虽实现了我们希望的效果，但是添加了不必要的代码。常常有现成的元素可以应用clear ,但是有时候为了布局不得不忍受巨大痛苦添加无意义的标记。

还可以不对浮动的文本和图像进行清理，而是选择浮动div容器:

.news {

background-color: gray;

border: solid 1px black;

float: left;

}

.news img {

float: left;

}

.news p{
float : right;

}

<p>Some tesxt</p>

</div>

上面的方法也会产生我们想要的结果。但是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择浮动布局中的几乎所有东西，然后使用合适的元素对这些浮动元素进行清理。

还有一些人使用CSS生成的内容或JavaScript对浮动元素进行清理。这两种方法的基本概念是相同的，并不直接向标记中添加进行清理的元素，而是将它动态地添加到页面中。对于这两种方法，需要指定进行清理的元素应该出现在哪里，而且常常要添加一个类名：

</div>

在使用CSS方法时，结合使用: after伪类和内容声明在指定的现有内容的末尾添加新的内容。如添加一个点，因为是个非常小的不引人注意的字符。因为不希望新内容占据垂直空间或者在页面上显示，所以需要将height设置为0，将visibility设置为hidden。因为被清理的元素在它们的顶外边距上添加了空间，所以生成的内容需要将它的display属性设置为block。这样设置之后，就可以对生成的内容进行清理：

.clear:after {

content: " .";

height: 0;

visibility: hidden;

display: block;

clear:both;

}

这个方法在大多数现代浏览器中是有效的，但是在IE6和更低版本中不起作用。最常用的方法是用到HACK ,从而使IE5和IE6应用布局

.clear {

display: inline-block;

}

/*Hack Targets IE Win only*/

* html .clear {height: 1%；}

.clear {display: block;}

/*End Hack*/