前端自学 - CSS 布局总结

一只小网虫

已于 2022-04-25 22:07:18 修改

阅读量176

点赞数 1

分类专栏： CSS 前端练习分享文章标签： css html html5 vscode

于 2021-10-04 21:18:03 首次发布

本文链接：https://blog.csdn.net/m0_48407729/article/details/120605891

版权

CSS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端练习分享

4 篇文章 0 订阅

订阅专栏

一、左右两列布局

（一）两侧宽度固定布局

该种情况很简单，获取到宽度，更据需求，分别赋予两列固定的宽度即可；

<!--
 * @Date: 2021-08-23 14:11:52
 * @LastEditTime: 2021-10-04 17:10:05
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clear::before,
        .clear::after {
            content: '';
            display: table;
        }

        .clear::after {
            clear: both;
        }

        .box1 {
            width: 1002px;
            margin: 0 auto;
        }

        .box1_left,
        .box1_right {
            float: left;
            height: 100px;
        }

        .box1_left {
            width: 300px;
            background-color: #333;
        }

        .box1_right {
            width: 702px;
            background-color: #666;
        }
        
    </style>
</head>

<body>
    <!-- 左右宽度固定 -->
    <div class="box1 clear">
        <div class="box1_left"></div>
        <div class="box1_right"></div>
    </div>
</body>

</html>

（二）左列宽度固定，右列宽度不固定

该种情况

将下方的盒子进行浮动左浮动；
并给予左外边距，值为左边盒子的宽度；
因为 margin 外边距填充是透明的，通过该种方法，可以将当前盒子向右移动，并露出下方盒子中的内容

<!--
 * @Date: 2021-08-23 14:11:52
 * @LastEditTime: 2021-10-04 17:10:05
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clear::before,
        .clear::after {
            content: '';
            display: table;
        }

        .clear::after {
            clear: both;
        }

        .box2 {
            width: 80%;
            margin: 20px auto 0;
        }

        .box2_left,
        .box2_right {
            height: 100px;
        }

        .box2_left {
            background-color: orangered;
            float: left;
            width: 300px;
        }

        .box2_right {
            background-color: yellow;
            margin-left: 310px;
        }

    </style>
</head>

<body>
    <!-- 左列宽度固定，右列宽度不固定 -->
    <div class="box2 clear">
        <div class="box2_left"></div>
        <div class="box2_right"></div>
    </div>
</body>

</html>

（三）左列宽度不固定，右列宽度固定

左侧宽度不固定的盒子，给予一个父级宽度也设置为 100%的盒子；
通过已知数据，将左侧宽度固定的盒子的右边，通过外边距填充的方式，留出空白；
将两个盒子都做左浮动；

此时大概效果如上

当我们赋予蓝色盒子一个自身宽度的负值左外边距时，下方的盒子就会跑到上方去，效果如下：

这种情况个人理解如下：

因为盒子的总宽度 == content + padding * 2 + border * 2 + margin * 2
当我们的盒子总宽度为 “ 0 ”时，下方的盒子就会因为浮动原因，跑到上面去。
所以赋予盒子一个左边的外边距负值，使盒子在理论上成为宽度为 “ 0 ”。

<!--
 * @Date: 2021-08-23 14:11:52
 * @LastEditTime: 2021-10-04 17:10:05
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clear::before,
        .clear::after {
            content: '';
            display: table;
        }

        .clear::after {
            clear: both;
        }

        .box3 {
            width: 80%;
            margin: 20px auto 0;
        }

        .box3_left {
            float: left;
            width: 100%;
        }

        .box3_right {
            float: left;
            height: 100px;
            width: 300px;
            background-color: rgb(32, 235, 250);
            margin-left: -300px;
        }

        .box3_inner {
            height: 100px;
            background-color: #333;
            margin-right: 310px;
        }

    </style>
</head>

<body>
    <!-- 左列宽度不固定，右列宽度固定 -->
    <div class="box3 clear">
        <div class="box3_left">
            <div class="box3_inner"></div>
        </div>
        <div class="box3_right"></div>
    </div>
</body>

</html>

二、左中右三列布局（淘宝双飞翼 & 圣杯布局）

实现上图效果，就是采用上方的左侧不固定，右侧固定的布局方式解决，是一样的思想，利用盒子总宽度为 “ 0 ” 进行解决

当我们大概布好局之后效果如下：

此时我们最左侧的红方块想要移动到上方，就需要左侧外边框进行负值赋予，当赋予到 -100px 时效果如下：

因为最左侧的方块上去了，所以后面的方块就占用了他的位置；
此时想让最左侧的方块到最左边，就要继续进行赋予负值，赋予一个多少值，并不知道；
大概需要赋予一个绿色盒子的总长度的值，一个盒子的总长度，我们习惯使用 100% 进行表示，所以，我们抛弃 px 这个单位，使用 % 百分比；
赋予最左侧盒子一个 -100% 就可以将他的位置移动到最左侧；
最后将右侧的盒子，赋予一个自身宽度的值，就可以实现效果了；

<!--
 * @Date: 2021-08-23 14:11:52
 * @LastEditTime: 2021-10-04 20:43:37
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clear::before,
        .clear::after {
            content: '';
            display: table;
        }

        .clear::after {
            clear: both;
        }

        .box4 {
            width: 80%;
            margin: 20px auto 0;
        }

        .centent,
        .box4_left,
        .box4_right {
            float: left;
        }
        
        .box4_left,
        .box4_right {
            height: 100px;
            width: 100px;
            background-color: orangered;
        }
        
       
        .centent {
            width: 100%;
            
        }
        .box4_left {
            margin-left: -100%;
        }
        .box4_right {
            margin-left: -100px;
        }
        
        .box4_inner {
            background-color: palegreen;
            height: 100px;
            margin: 0 110px;
        }
    </style>
</head>

<body>
    <!-- 左列宽度固定，右列宽度固定，中间宽度不固定 -->
    <div class="box4 clear">
        <div class="centent">
            <div class="box4_inner"></div>
        </div>
        <div class="box4_left"></div>
        <div class="box4_right"></div>
    </div>


</body>

</html>