7 css基础之布局！

小咪咪 2021-09-20 07:04 348阅读 0赞

上一章我们学习了CSS的引用，让我们可以将CSS运用在我们的HTML文档上，那么我们这一次就来实际的运用它。

这一次将介绍CSS的几个布局方式：

1.  **左右布局**
2.  **左中右布局**
3.  **水平居中**
4.  **垂直居中**

让我们依次来讲解（注：其实现在已经有了更好的flex方案，但是因为是基础学习，所以从 这里开始）

**一，左右布局**

**1.利用float实现左右布局**

![v2-d16560c4d9c143e20dda2c689f4b8e09_hd.jpg][]

如图所示，我们现在需要实现这两个色块的左右布局（注：黑色边框是为了方便理解所加上的）

**HTML代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css布局demo</title>
        <link rel="stylesheet" href="cssbuju.css">
    
    </head>
    <body>
    
    <div class="container">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    
    </body>
    </html>

**CSS代码：**

.container{
        width: 600px;
        height: 600px;
        margin: 0 auto;
        border: 1px black solid;
    }
    .one{
    
        width: 300px;
        height: 300px;
    
        background: green;
    }
    
    .two{
        width: 300px;
        height: 300px;
        background: red;
    }

现在我们给container这个容器中的两个div都加上float：left;属性后就实现了左右布局

**现在的CSS代码：**

.container{
        width: 600px;
        height: 600px;
        margin: 0 auto;
        border: 1px black solid;
    }
    .one{
        float: left;
        width: 300px;
        height: 300px;
    
        background: green;
    }
    
    .two{
        float: left;
        width: 300px;
        height: 300px;
        background: red;
    }

（**注：在这个demo中容器的宽度是两个色块宽度的总和，所以我们可以都用float：left;如果不同我们可以让第二个div使用float：right;**）

我们也可以采取让第二个div自适应的方法来实现左右布局

**CSS代码：**

.container{
        width: 600px;
        height: 600px;
        margin: 0 auto;
        border: 1px black solid;
    }
    .one{
        float: left;
        width: 300px;
        height: 300px;
    
        background: green;
    }
    
    .two{
        
        margin-left: 300px;
        height: 300px;
        background: red;
    }

![v2-c0074b909bff3e0c93b2f98e97826fd3_hd.jpg][]

效果其实是一样的。

**2.用绝对定位与相对定位来实现左右布局**

**CSS代码：**

.container{
        width: 600px;
        height: 600px;
        margin: 0 auto;
        border: 1px black solid;
        position: relative;
    }
    .one{
        float: left;
        width: 300px;
        height: 300px;
    
        background: gray;
        position: absolute;
    }
    
    .two{
    
        margin-left: 300px;
        height: 300px;
        background: red;
    }

可以看见我们依旧实现了左右布局（ps：为了和之前做区别，我将第一个色块改为了灰色，并无实际意义）

![v2-7c39c010710c618e64612b78a8a191e4_hd.jpg][]

--------------------

**二，左中右布局**

现在我们来尝试一下左中右的布局，其实和左右布局是差不多的

**1.利用float**

**代码如下：**

.container{
        width: 600px;
        height: 600px;
        margin: 0 auto;
        border: 1px black solid;
    
    }
    .one{
        float: left;
        width: 200px;
        height: 300px;
    
        background: gray;
    
    }
    
    .thr{
        float: left;
        width: 200px;
        height: 300px;
    
        background: yellowgreen;
    }
    
    .two{
    
        margin-left: 200px;
        height: 300px;
        background: red;
    }

是不是其实和左右布局差不多？

![v2-3a7730035c1a6a8926d313d5e2c9bca8_hd.jpg][]

**2.用绝对定位与相对定位来实现左中右布局（几乎差不多的标题hh）**

**CSS代码：**

.container{
        width: 600px;
        height: 600px;
        margin: 0 auto;
        border: 1px black solid;
        position: relative;
    
    }
    .one{
    
        width: 200px;
        height: 300px;
        left: 0;
        background: gray;
        position: absolute;
    
    }
    
    .thr{
        margin: 0 200px;
        height: 300px;
        background: aqua;
    
    
    
    
        position: relative;
    }
    
    .two{
        margin: -300px 0;
        right: 0;
        width: 200px;
        height: 300px;
        background: red;
        position: absolute;
    }

**HTML代码：**

![v2-4d7862c9ab1492683795bbc4994245fa_hd.jpg][]

**注：这种方法会从文档流当中跳出来，所以得重新调整一下数据**

--------------------

**三、水平居中**

**一句话：margin: 0 auto;上下是0左右auto，适用于块级元素**

**实例就不做了，仔细看看其实已经有啦**

--------------------

**四，垂直居中**

**1.行内块级元素**

使用**display: inline-block, vertical-align: middle和一个伪元素**让内容块处于容器中央.

**2.不定高度**

可用**vertical-align**属性, 而**vertical-align只有**在父层为** td **或者** th** 时, 才会生效, 对于其他块级元素, 例如** div、p **等, 默认情况是不支持的. 为了使用**vertical-align,** 我们需要设置父元素**display:table**, 子元素 **display:table-cell;vertical-align:middle;**

--------------------

**注：以上一切其实都可以用flex实现，但是为了学习还是要了解**

--------------------

**五，最后一点小小的小窍门**

在布局的时候很多小伙伴都遇见过自己想要单独改变其中一个或者是一类的元素但是十分麻烦的情况，在这里我就要隆重推出**:nth-child()**啦，他就可以控制其中任意一种子类

比如你要控制偶数个就是**:nth-child(even)**

控制奇数个**:nth-child(odd)**

控制第一个**:nth-child(1)**

**是不是超好用hh要记住了哦**

[v2-d16560c4d9c143e20dda2c689f4b8e09_hd.jpg]: /images/20210812/8f4aed8495fe4cca9f22a0adb7370017.png
[v2-c0074b909bff3e0c93b2f98e97826fd3_hd.jpg]: /images/20210812/e4e6a1a3e4db475ca4ce742366a435bf.png
[v2-7c39c010710c618e64612b78a8a191e4_hd.jpg]: /images/20210812/173dda8ecbf24120987cde62f2e2799b.png
[v2-3a7730035c1a6a8926d313d5e2c9bca8_hd.jpg]: /images/20210812/814ecf6ea4bf4198868e03090b599c40.png
[v2-4d7862c9ab1492683795bbc4994245fa_hd.jpg]: /images/20210812/544f4b21745f48aabb9ff287462450a8.png