前端必会三种CSS布局

最新推荐文章于 2024-07-22 09:00:00 发布

在地球迷路的怪兽

最新推荐文章于 2024-07-22 09:00:00 发布

阅读量3.3k

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/qq_53324833/article/details/124105176

版权

前端工程学习专栏收录该内容

25 篇文章 6 订阅

订阅专栏

概述

在这里插入图片描述

大概布局情形如下：
在这里插入图片描述
上面的说法可能有点抽象，我们通过京东商城来进一步了解一下布局：

头部可以看到是通栏的布局，网站的主体是放在一个盒子里的，然后这个盒子设置在水平方向居中的位置，接下来的内容就放在这个盒子里面来进行布局。
可以看见该盒子里面的布局都是一行两列一行三列多行多列等等等等的布局，即我们本篇文章要讲的。
只要掌握了这三种布局方式，搭建一个完整网页是没有问题的。

正文

一般的PC端网站宽度是1280px，这里方便我们用宽度为1000px。
另外如果我们不设置的话，默认浏览器会存在8px的边距，所以我们要设置一下将其全局删除一下（因为我是用Vue写的，所以我设置的方法和一般的不一样）：
在这里插入图片描述
然后创建文件叫global，意思是一个进行全局处理的文件样式：

然后在main.js中引入：
现在那8px的像素就没有啦。

<template>
    <!--vue2必须要用一个div作为body在最外层-->
    <div>
        <div class="container">

        </div>
    </div>
</template>

<script>
    export default {
        name: 'Home',
    }
</script>

<style>
    .container{
        width: 1000px;
        height: 1500px;
        /*border用来添加边框，solid是实线的意思，red是给这个实线设置为红色*/
        border: 2px solid red;
        /*我们让这个主体盒子水平居中，下面一行代码的意思是
        上30px边距，左右外边距自动相等，下外边距为0*/
        margin: 30px auto 0px;
    }
</style>

效果如下：
在这里插入图片描述

构建一行左右两列的布局

即做下面红色和黄色的部分：
在这里插入图片描述

这两个div也是合在一起放在一个大div里的：

<template>
    <!--vue2必须要用一个div作为body在最外层-->
    <div>
        <div class="container">
            <!--第一行的大div-->
            <div class="column2">
                <!--第一行左边红色盒子-->
                <div class="column2-1">

                </div>
                <!--第一行右边黄色盒子-->
                <div class="column2-2">

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Home',
    }
</script>

<style>
    .container{
        width: 1000px;
        height: 1500px;
        /*border用来添加边框，solid是实线的意思，red是给这个实线设置为红色*/
        border: 2px solid red;
        /*我们让这个主体盒子水平居中，下面一行代码的意思是
        上30px边距，左右外边距自动相等，下外边距为0*/
        margin: 30px auto 0px;
    }
    .column2{
        border: 2px solid black;
    }
    .column2 .column2-1{
        width: 700px;
        height: 300px;
        /*如果不加下面这行，根据页面文档流的格式，下面黄色的div会出现在红色框下面
        而我们需要它们平行一左一右的放置，所以需要float：left让其左浮动*/
        float: left;
        background-color: red;
    }
    .column2 .column2-2{
        /*留出20px的空隙会好看些*/
        width: 280px;
        height: 300px;
        /*因为上面红色div使用了左浮动所以它飘了起来不再占有原来位置，
        所以黄色盒子就往上走占了红盒原来的位置从而被红盒给盖住了，为了避免这个情况
        我们要让这个黄盒也浮动，飘到右边去*/
        float: right;
        background-color: yellow;
    }
</style>

效果如下：
在这里插入图片描述
但我们可以看出，包裹这两个有色盒的div已经塌陷了，因为这两个有色盒浮动了。这肯定是不允许的，所以我们需要清除浮动。
我们只要在需要清除浮动的所有盒子的后面加一个div用来清除就可以了，那为什么必须得放在最后呢？因为clear只能清除位于它前面的div的浮动，位于后面的不管。

<template>
    <!--vue2必须要用一个div作为body在最外层-->
    <div>
        <div class="container">
            <!--第一行的大div-->
            <div class="column2">
                <!--第一行左边红色盒子-->
                <div class="column2-1">

                </div>
                <!--第一行右边黄色盒子-->
                <div class="column2-2">

                </div>
                <!--该div用来清除位于该div之前的所有浮动（不管是左浮动还是右浮动），用both-->
                <div style="clear: both"></div>
            </div>
        </div>
    </div>
</template>

构建一行三列的布局

如下图所示的样子：
在这里插入图片描述
一样的方式，不再赘述：

<template>
    <!--vue2必须要用一个div作为body在最外层-->
    <div>
        <div class="container">
            <!--第一行的大div-->
            <div class="column2">
                <!--第一行左边红色盒子-->
                <div class="column2-1">

                </div>
                <!--第一行右边黄色盒子-->
                <div class="column2-2">

                </div>
                <!--该div用来清除位于该div之前的所有浮动（不管是左浮动还是右浮动），用both-->
                <div style="clear: both"></div>
            </div>
            <!--第二行的大div-->
            <div class="column3">
                <div class="column3-1"></div>
                <div class="column3-2"></div>
                <div class="column3-3"></div>
                <!--同样也要清楚浮动导致的外层div塌陷嗷-->
                <div style="clear: both"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Home',
    }
</script>

<style>
    .container{
        width: 1000px;
        height: 1500px;
        /*border用来添加边框，solid是实线的意思，red是给这个实线设置为红色*/
        border: 2px solid red;
        /*我们让这个主体盒子水平居中，下面一行代码的意思是
        上30px边距，左右外边距自动相等，下外边距为0*/
        margin: 30px auto 0px;
    }
    .column2{
        border: 2px solid black;
    }
    .column2 .column2-1{
        width: 700px;
        height: 300px;
        /*如果不加下面这行，根据页面文档流的格式，下面黄色的div会出现在红色框下面
        而我们需要它们平行一左一右的放置，所以需要float：left让其左浮动*/
        float: left;
        background-color: red;
    }
    .column2 .column2-2{
        /*留出20px的空隙会好看些*/
        width: 280px;
        height: 300px;
        /*因为上面红色div使用了左浮动所以它飘了起来不再占有原来位置，
        所以黄色盒子就往上走占了红盒原来的位置从而被红盒给盖住了，为了避免这个情况
        我们要让这个黄盒也浮动，飘到右边去*/
        float: right;
        background-color: yellow;
    }
    .column3{
        border: 2px solid blue;
        /*第二行的大div我们让其与上面的大div有20px的间距*/
        margin-top: 20px;
    }
    .column3 .column3-1{
        width: 200px;
        height: 300px;
        /*根据我们需要的样式图，我们让其左浮动*/
        float: left;
        background-color: aqua;
    }
    .column3 .column3-2{
        width: 400px;
        height: 300px;
        /*左浮动*/
        float: left;
        /*我们让它和上边的盒子有一点间距*/
        margin-left: 20px;
        background-color: coral;
    }
    .column3 .column3-3{
        width: 360px;
        height: 300px;
        /*前两个左浮动，我们让第三个右浮动则正好可以实现布局*/
        float: right;
        background-color: blueviolet;
    }
</style>

效果如下：
在这里插入图片描述

构建一行多列（多行多列）的布局

效果如下：
在这里插入图片描述
我们一般用ul无序列表标签来做这种多行多列的效果，用ul时的一个小技巧，以需要十个ui标签为例，我们如下输入：

然后按下tab补全键（idea环境中）就可以自动补全十个ui啦！
在最后完成时，将之前用来做辅助参考的线啊背景色啊都注释掉，就拿到我们最后的样子啦：

<template>
    <!--vue2必须要用一个div作为body在最外层-->
    <div>
        <div class="container">
            <!--第一行的大div：一行两列效果-->
            <div class="column2">
                <!--第一行左边红色盒子-->
                <div class="column2-1">

                </div>
                <!--第一行右边黄色盒子-->
                <div class="column2-2">

                </div>
                <!--该div用来清除位于该div之前的所有浮动（不管是左浮动还是右浮动），用both-->
                <div style="clear: both"></div>
            </div>
            <!--第二行的大div：一行多列效果-->
            <div class="column3">
                <div class="column3-1"></div>
                <div class="column3-2"></div>
                <div class="column3-3"></div>
                <!--同样也要清楚浮动导致的外层div塌陷嗷-->
                <div style="clear: both"></div>
            </div>
            <!--第三行的大div：多行多列效果-->
            <div class="column-n">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <!--清除浮动-->
                    <div style="clear: both"></div>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Home',
    }
</script>

<style>
    .container{
        width: 1000px;
        /*height: 1500px;*/
        /*border用来添加边框，solid是实线的意思，red是给这个实线设置为红色*/
        /*border: 2px solid red;*/
        /*我们让这个主体盒子水平居中，下面一行代码的意思是
        上30px边距，左右外边距自动相等，下外边距为0*/
        margin: 30px auto 0px;
    }
    .column2{
        /*border: 2px solid black;*/
    }
    .column2 .column2-1{
        width: 700px;
        height: 300px;
        /*如果不加下面这行，根据页面文档流的格式，下面黄色的div会出现在红色框下面
        而我们需要它们平行一左一右的放置，所以需要float：left让其左浮动*/
        float: left;
        background-color: red;
    }
    .column2 .column2-2{
        /*留出20px的空隙会好看些*/
        width: 280px;
        height: 300px;
        /*因为上面红色div使用了左浮动所以它飘了起来不再占有原来位置，
        所以黄色盒子就往上走占了红盒原来的位置从而被红盒给盖住了，为了避免这个情况
        我们要让这个黄盒也浮动，飘到右边去*/
        float: right;
        background-color: yellow;
    }
    .column3{
        /*border: 2px solid blue;*/
        /*第二行的大div我们让其与上面的大div有20px的间距*/
        margin-top: 20px;
    }
    .column3 .column3-1{
        width: 200px;
        height: 300px;
        /*根据我们需要的样式图，我们让其左浮动*/
        float: left;
        background-color: aqua;
    }
    .column3 .column3-2{
        width: 400px;
        height: 300px;
        /*左浮动*/
        float: left;
        /*我们让它和上边的盒子有一点间距*/
        margin-left: 20px;
        background-color: coral;
    }
    .column3 .column3-3{
        width: 360px;
        height: 300px;
        /*前两个左浮动，我们让第三个右浮动则正好可以实现布局*/
        float: right;
        background-color: blueviolet;
    }
    .column-n {
        /*border: 2px solid blue;*/
        margin-top: 20px;
    }
    .column-n ul{
        /*background-color: blue;*/
    }
    .column-n ul li{
        /*border: 1px solid red;*/
        /*给每个li添加宽高*/
        width: 190px;
        height: 200px;
        /*添加左浮动，让它从左往右从上往下排列开排列*/
        float: left;
        /*让每个盒子上下左右都边距为5px*/
        margin: 5px;
        background-color: aquamarine;
    }
    /*去掉ul无序标签的点点*/
    ul {
        list-style: none;
    }
</style>

效果如下：
在这里插入图片描述
这三种布局可以解决99%以上的网页布局，学到啦学到啦~

总结

网页布局的样子无外乎上面三种，一开始可以设置border边框线和填充背景颜色来进行辅助布局，同时要记住大盒子套小盒子的套路，都是一个样子，还有就是浮动清楚的方法得记着，一些基础的CSS语法这回用到了就再记忆一下，就酱紫。

在地球迷路的怪兽

关注

3
点赞
踩
45

收藏

觉得还不错? 一键收藏
打赏
3
评论
前端必会三种CSS布局

概述大概布局情形如下：上面的说法可能有点抽象，我们通过京东商城来进一步了解一下布局：头部可以看到是通栏的布局，网站的主体是放在一个盒子里的，然后这个盒子设置在水平方向居中的位置，接下来的内容就放在这个盒子里面来进行布局。可以看见该盒子里面的布局都是一行两列一行三列多行多列等等等等的布局，即我们本篇文章要讲的。只要掌握了这三种布局方式，搭建一个完整网页是没有问题的。正文一般的PC端网站宽度是1280px，这里方便我们用宽度为1000px。另外如果我们不设置的话，默认浏览器会存在8px的边
复制链接

扫一扫