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
示例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            margin: 20px;
            font-size: 12px;
        }
        #container {
            background-color: #a0c8ff;
            border: 1px dashed #000000;
            padding: 15px;
            width: 300px;
        }
        #container div {
            background-color: #fff0ac;
            border: 1px solid #000000;
            padding: 10px;
        }
        #item-2 {
        }
    </style>
</head>
<body>
    <div id="container">
        <div>Box-1</div>
        <div id="item-2">Box-2</div>
        <div>Box-3</div>
    </div>
</body>
</html>

预览效果：

使用absolute定位，修改#item-2的CSS代码：

#item-2 {
    position: absolute;
    top: 0;
    right: 0;
}

预览效果：

从预览效果中可以看出，此时item-2的显示范围已经不在container中，不占用container所包含的空间。
修改#item-2的CSS代码：

#item-2 {
    position: absolute;
    top: 10px;
    right: 10px;
}

效果预览：

修改了top和right的设置，，item-2显示效果仍为以浏览器窗口为基准。
absolute定位并不是都只能以浏览器窗口为基准来定位的，修改container的CSS代码：

#container {
    background-color: #a0c8ff;
    border: 1px dashed #000000;
    padding: 15px;
    width: 300px;
    position: relative;
}

显示效果预览：

这时的效果偏移距离没有变化，但是偏移的基准不再是浏览器窗口，而是container，即父div。
对于absolute定位的描述：
◊ 使用absolute定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，则以浏览器窗口为基准进行定位。
“已经定位”的含义是position属性被设置，并且被设置为不是static的任意一种方式。
“最近”是指在这个节点的所有祖先节点中，距离该节点的层次最近的祖先节点，以距离最近的祖先节点作为定位基准。
◊ absolute定位的框从标准文档流中脱离，对其后的相邻其他盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。
2.4 fixed
fixed定位与absolute定位有些类似，区别在于定位的基准不是祖先元素，而是浏览器窗口或者其他显示设备的窗口。当访问者拖动浏览器窗口的滚动条时，固定定位的元素将保持相对浏览器窗口不变的位置。
示例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            font-size: 12px;
            margin: 0;
            padding: 0;
        }
        #tapbar {
            position: fixed;
            height: 30px;
            line-height: 30px;
            width: 100%;
            background-color: #f5f5f5;
            top:0;
            left:0;
        }
        #container {
            background-color: #a0c8ff;
            border: 1px dashed #000000;
            width:96%;
            margin:30px auto auto;
            height: 1500px;
        }
        #container div {
            background-color: #fff0ac;
            border: 1px solid #000000;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="tapbar">固定定位栏</div>
    <div id="container">
        <div>Box-1</div>
        <div>Box-2</div>
        <div>Box-3</div>
    </div>
</body>
</html>

效果预览：

从预览效果中可以看出，设置了fixed定位的topbar栏没有随着浏览器的下拉滚动而变动位置。
3. z-index空间位置
z-index属性用于调整定位时重叠的上下位置，页面为x-y轴，垂直于页面的方向为z轴，z-index值大的页面位于其值小的上方。
z-index属性的值为整数，可以是正数也可以是负数。当块被设置了position属性时，该值便可以设置各块之间的重叠高低关系。默认的z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。

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

1. 盒子的浮动

发表评论取消回复

1. 盒子的浮动

发表评论 取消回复

发表评论取消回复