CSS入门系列（六）CSS的布局_css六宫格-优快云博客

本文链接：https://blog.youkuaiyun.com/leichaoaizhaojie/article/details/53148776

CSS入门系列（六）CSS的布局

上一节我们说完盒子，光有盒子是不行的，我们还需要布局，这一节开始我们来描述一下css的布局。

1. 漂浮float

none：默认不漂浮
left：文本流向对象的右边，注意是右边，因为对象固定在了左边，所以文本只能在这个对象的右边。
right：文本流向对象的左边，原理同上。
演示：
原图

当我在div1的属性中加入float时,盒子2就跑到盒子1的右边了：

#div_1{
    background-color:#F90;
    float:left;
    }

2. 定位position

有四个值：

static: 默认，无特殊定位；
absolute: 绝对，脱离文档流，使用left，right，top，bottom等属性相对于其最近的一个具有定位设置的父对象进行绝对定位，如果没有父对象，则依据body对象。
relative：对象不可层叠，将依据left，right，top，bottom等属性在正常文档流中偏移位置。
首先演示一下absolute：
原始的网页是这样的：

代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    div{
    border:#09F solid 1px;
    height:100px;
    width:200px;
    }
    #div_1{
    background-color:#F90;
    }
    #div_2{
    background-color:#5F0;
    }
    #div_3{
    background-color:#09F;
    }
    </style>
</head>

<body>
    <div id="div_1">
        这是盒子1
    </div>
    <div id="div_2">
        这是盒子2
    </div><div id="div_3">
        这是盒子3
    </div>
</body>

我们在这个的基础上做一个父类的盒子，然后移动，我们可以看到效果是，大盒子移动了，小盒子跟着大盒子。设置了大盒子是absolute，且他没有父对象，所以是相对body移动的：
这里写图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    div{
    border:#09F solid 1px;
    height:100px;
    width:200px;
    }
    #div_0{
    background-color:#F9F;
    height:400px;
    width:400px;
    position:absolute;
    top:100px;
    left:100px;
    }
    #div_1{
    background-color:#F90;
    }
    #div_2{
    background-color:#5F0;
    }
    #div_3{
    background-color:#09F;
    }
    </style>
</head>

<body>
<div id="div_0">
    <div id="div_1">
        这是盒子1
    </div>
    <div id="div_2">
        这是盒子2
    </div><div id="div_3">
        这是盒子3
    </div>
</div>
</body>

这时候，我们设置盒子1，让他相对大盒子移动：
这里写图片描述
改动的代码为：

    #div_1{
    background-color:#F90;
    position:absolute;
    top:100px;
    left:100px;
    }

注意看，盒子1出文档流后，盒子2填充了盒子1的位置了，这就是出文档流的原因。这里就用和relative区别开，如果设置relative，这里盒子2就不会填充盒子1的位置，因为盒子1没出流。

CSS入门系列（六）CSS的布局

CSS入门系列（六）CSS的布局

目录

1. 漂浮float

2. 定位position