首页 > 代码库 > CSS系列:CSS中盒子的浮动与定位

CSS系列:CSS中盒子的浮动与定位

1. 盒子的浮动

  在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接;而在竖直方向与相邻元素依次排列,不能并排。

  CSS中float属性,默认为none。将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧。同时默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来决定。

float: left;

  可以使用clear来清除浮动:

clear: left | right | both;

2. 盒子的定位

  在CSS中有一个position属性,用来进行定位操作。position属性可以设置为4个属性值之一:

  ◊ static:默认的属性值,该盒子按照标准流(包括浮动方式)进行布局;

  ◊ relative:相对定位,使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它。

  ◊ absolute:绝对定位,盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。它对其后的相邻盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样。

  ◊ fixed:固定定位,它和绝对定位类似,只是以浏览器窗口为基准进行定位,当拖动浏览器的滚动条时,依然保持对象位置不变。

2.1 static

  static为默认值,表示块保持在原本的位置上,不会有任何移动的效果。没有设置任何position属性相当于使用static方式。

2.2 relative

  使用relative相对定位,除了将position属性设置为relative之外,还需要指定一定的偏移量,水平方向通过left或者right属性来指定,竖直方向通过top或bottom来指定。

<!DOCTYPE html><html><head>    <title></title>    <style type="text/css">        .relative {            position: relative;            top: 20px;            left: 20px;            width: 500px;        }    </style></head><body>    <div class="relative">Position相对偏移</div></body></html>

  在上面的示例中,.relative若不设置width,则由于block元素会自动伸展到宽度与父元素相同,且加上left的20px,则在浏览器中预览时,会出现横向滚动条。

  ◊ 使用相对定位的盒子,会相对于它原本的位置,通过偏移指定的距离,到达新的位置。

  ◊ 使用相对定位的盒子仍在标准流中,它对父块和兄弟盒子没有任何影响。

2.3 absolute

  

CSS系列:CSS中盒子的浮动与定位