前端常用布局大全——细致讲解

菜鸟丶攻城狮

已于 2022-08-08 16:50:12 修改

阅读量3.7k

点赞数

分类专栏：前端 javascript 文章标签：前端 css javascript

于 2022-01-07 20:19:38 首次发布

本文链接：https://blog.csdn.net/qq_44197554/article/details/122370550

版权

前端 javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍了前端开发中常见的布局技术，包括盒模型、浮动布局、定位布局、表格布局和flex布局。通过实例展示了各种布局方式的实现方法和应用场景，特别强调了flex布局的简洁性和响应式特性，建议前端开发者掌握。

摘要由CSDN通过智能技术生成

前言

作为一名前端开发者，每天都在和浏览器打交道，而浏览器中展示的网页需要做的很美观，并且可以吸引住用户浏览网页，提升用户体验是很重要的，所以不可避免的就要用到各种各样的布局。今天就来列举一下各种常用布局以及实现方法。在列举之前需要和大家聊一下文档的盒模型。文档盒模型分为两种：标准盒模型、怪异盒模型。他们俩有什么区别呢？
标准盒模型的宽度(width) = 左右margin + 左右border + 左右padding + content内容区。
怪异盒模型的宽度(width) = 左右margin + content内容区
在标准盒模型中使用padding会把宽度撑大，而怪异盒模型不会，只会缩小内容区，如果想将一个标准盒模型变成怪异盒模型可以使用box-sizing: border-box;。
在这里插入图片描述

.left {
    width: 300px;
    padding: 30px;
    float: left;
    background-color: red;
}
.right {
    padding: 30px;
    box-sizing: border-box;
    width: 300px;
    float: right;
    background-color: yellow;
}

上图中我给left盒right都设置了padding为30px，但是right设置了box-sizing属性，可以很明显的看出这两者之间的区别。

文档流布局

这个很简单，就是按照文档原本的渲染方式一条一条的展示出来，元素分为行元素、块元素，行元素可以并列展示，块元素独占一行，这个想必大家都很清楚了。

<body>
    <h1>行元素</h1>
    <p>111233</p>
    <span>文本</span>
    <button>按钮</button>
</body>

在这里插入图片描述
使用这种默认的布局方式肯定不能满足前端开发者日常的需求，因为实在是太丑了，虽然可以通过display属性来改变元素的属性，变成行级块元素或者行元素变块元素、块元素变行元素，但是依然达不到想要的效果，所以需要进行美化。

浮动布局

浮动布局主要是利用float属性来实现，可以给元素设置float属性让元素脱离文档流，然后设置left和right来边改元素在文档上的展示位置以此形成我们想要的布局方式，下面用浮动布局完成一个左右宽度固定中间自适应的三栏布局。

<style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 500px;
        }
        .left {
            width: 300px;
            float: left;
            background-color: red;
        }
        .right {
            width: 300px;
            float: right;
            background-color: yellow;
        }
        .middle {
            background-color: blue;
            margin: 0 300px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</body>

在这里插入图片描述
如果想利用浮动布局实现上中下三栏布局，别忘记清楚浮动即可，否则会出现元素遮挡。注意：使用float浮动布局middle中间的元素在html中要放在最后，否则黄色区域会换行，因为div是块级元素使用margin后右边区域也是属于它的。

定位布局

定位布局是利用position来实现，可以使用absolute绝对定位移动元素的位置，使用绝对定位也会使元素脱离文档流，下面使用绝对定位实现一个三栏布局。

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 500px;
        }
        .left {
            position: absolute;
            width: 300px;
            left: 0;
            top: 0;
            background-color: red;
        }
        .right {
            position: absolute;
            width: 300px;
            right: 0;
            top: 0;
            background-color: yellow;
        }
        .middle {
            background-color: blue;
            margin: 0 300px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</body>

在这里插入图片描述
定位布局和浮动布局差不多，需要注意的是这里中间元素不需要放在最后，按照正常顺序即可。

表格布局

表格是很严格的一行就是一行，一列就是一列，并且他们的位置不会发生变化，所以我们可以利用表格布局来实现我们想要的布局，在以前还没有出现这些浮动、定位属性的时候表格用的是最多的布局方式。通过给父元素设置display: table;，给子元素设置display: table-cell;即可实现三栏布局，使用表格布局还是比较方便的，几乎不需要写什么样式就可以实现。

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 500px;
        }
        .parent {
            display: table;
            width: 100%;
        }
        .parent > div {
            display: table-cell;
        }
        .left {
            width: 300px;
            background-color: red;
        }
        .right {
            width: 300px;
            background-color: yellow;
        }
        .middle {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

在这里插入图片描述

flex布局

flex布局也叫弹性布局，是利用css3新出的属性display: flex实现的，这种布局方式很方便，也不会对文档的结构改变，是当下最热门的一种布局方式，建议每个前端开发者都要掌握。
什么是弹性布局？
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。目前主流的浏览器都已经支持了这种布局方式。使用这种布局的方式很简单，只需要给父级设置display: flex即可。
在 flex 中，最核心的概念就是容器和轴，所有的属性都是围绕容器和轴设置的。其中，容器分为父容器和子容器。轴分为主轴和交叉轴（主轴默认为水平方向，方向向右，交叉轴为主轴顺时针旋转 90°）。外层包裹子元素的父级被称为容器，内部的子元素被称为项目。父容器上有六大属性：

flex-direction：主轴的方向。
flex-wrap：超出父容器子容器的排列样式。
flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式。
justify-content：子容器在主轴的排列方向。
align-items：子容器在交叉轴的排列方向。
align-content：多根轴线的对齐方式。

这些属性详细的用法在这就不做介绍了，这不是本文的重点，感兴趣的可以点击这个链接了解MDN，下面使用flex写一个三栏布局，看看到底有多简单。

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 500px;
        }
        .parent {
            display: table;
            width: 100%;
        }
        .parent > div {
            display: table-cell;
        }
        .left {
            width: 300px;
            background-color: red;
        }
        .right {
            width: 300px;
            background-color: yellow;
        }
        .middle {
            /* 占满剩余空间 */
            flex: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>