定位是对元素进行定位。定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。浮动不完全是定位,不过,它当然也不是正常流布局。
一切标签都是框:div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
普通流,CSS有三种基本的定位机制,普通流,浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定,它也叫文档流吧。
display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。默认值是inline,此元素前后会被显示为内联元素,元素前后没有换行符。
position 属性规定元素的定位类型。可能的值有absolute,fixed,relative,static。默认值为static,没有定位,元素出现在正常的流中。这里会忽略top, bottom, left, right 或者 z-index 声明。(下面讲到不忽略的)
固定定位fixed表示生成绝对定位的元素,相对于浏览器窗口进行定位,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。下同,不过下面的用的广一下咯。
相对定位relative,在原来的文档中,一个元素框本来应该出现的位置为原始位置,现在在原始位置的基础上进行移动,这种移动就叫做相对定位。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
上面代码表示在原来的框的基础上向下移动20像素,向右移动30像素。相对定位是在文档流之中的,因为它必须先知道在文档流之中属于它的位置然后再进行移动的。它的移动如果跟别的内容重合,那么肯定会覆盖别的内容的。
绝对定位absolute,它不在原来的文档流之中,因此不占据空间。绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。大致的意思是它的位置相对于它的父亲元素框。在父亲元素框内进行绝对定位。这里可以控制堆放次序,还是因为它与原来的文档流是无关的,与父亲元素框里的其他子元素属于不同的次元,所以设置优先级就会决定谁可以覆盖谁。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
浮动float属性,实现了元素的浮动,float 属性定义元素在哪个方向(左或者右,尽可能往上挤)浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。可能的值有left元素向左浮动,right元素向右浮动,默认是none,元素不浮动,会出现在它应该出现的位置。这个浮动不是飘来飘去,显示的是直接浮动过去之后的样子。如果把一个列表的每一行元素都设置为向左浮动,那么它们可能会处在同一行之中,这就可以做出水平的菜单栏,当然如果浏览器变小了,它们水平装不下了,就会进入下一行,直到有足够的空间,因为无法容纳水平排列的多个浮动元素。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。这很像玩固定的积木在一个框框里按住他往左移动。(水平移动的俄罗斯方块)
行框,如果是不浮动的框,那么文字是不包围图片的,在图片的下面另起一行就是了,因此图片右边可能出现一片空白。如果是浮动的框,就会把这片空白给填补上来,那么这意味着浮动框旁边的行框是被缩短了的,因为它给浮动框留出了空间。行框围绕浮动框。这里浮动框也不在文档的普通流之中,但不会产生覆盖,因为它成为了一个新的块级元素,与父亲元素之内的别的子元素框互动。那么问题来了,如果要阻止行框围绕浮动框,要那一片空白该怎么办?
clear 属性规定元素的哪一侧不允许其他浮动元素。默认值是none,允许这样做。其他可能的值为left,right,both表示不允许哪边的浮动元素存在。
img
{
float:left;
clear:both;
}
上面的表示如果有两个小图片都向左浮动,一般的话就可以在同一行显示了,除非页面特别小了,但是上面clear属性说明了不允许别的浮动框在同一行,所以他们就变成了两行了。那么问题就可以解决了,我们用clear属性,把文字段也设置成为浮动元素,那么它们就不会出现围绕现象了。还可以有别的选择,比如两个向左浮动的元素,这样下面就会有一大片空白。挺好用。
上面会出现一个问题,就是如果在一个父元素中的所有孩子元素全部都是浮动元素。因为浮动元素脱离了文档流,它们不占据空间,于是,父元素就变成了一个空的元素,而且这个元素并没有包围浮动元素,而会出现在浮动元素的上方。如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear进行清理,但问题是没有现有的元素可以应用清理属性。此时我们在父元素内再添加一个空的元素,元素用清理属性就可以了。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
如上面的代码,在父元素框里加一个没有内容的<div>元素框,这个元素实行清理,这就实现了父元素包围了浮动元素。但是这需要添加多余的代码。常常有元素可以应用 clear,但是有时候不得不为了进行布局而添加无意义的标记。
另外还有另一种方法,那就是这个父元素框也是浮动框,这就可以了。但问题是下一个元素会受到这个父浮动元素的影响。在这个基础上怎么解决问题呢?那就是所有的布局东西全进行浮动,然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少和消除不必要的标记。(常用方法)
补充:
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
clip属性可以切剪元素,这里切剪的是矩形rect,里面的四个参数是上,水平,垂直,下的截取长度。
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
z-index属性是设置优先级的,默认的z-index是0。-1是拥有更低的优先级,这样图片就会放在底层,看起来像是背景图片。如果改成z-index=1,那么图片就会覆盖下面的文字了。