CSS常见的布局结构

万万Aies

已于 2023-02-04 13:17:31 修改

阅读量228

点赞数 1

分类专栏： CSS 文章标签： css html5 Powered by 金山文档

于 2023-01-13 01:04:58 首次发布

本文链接：https://blog.csdn.net/Wanan_J/article/details/128660550

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

两栏布局

所谓两栏布局即为左边固定，右边自适应。

1.通过设置浮动实现

left左浮动并设置宽度，right设置margin-left为left的宽度也能实现。

left左浮动并设置宽度，right设置over-flow:hidden也能实现。

注意：为了能更好的看出效果建议设置一下div的高度以及背景颜色。

<!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>两栏式布局</title>
    <style>
        div {
            height: 300px;
        }

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

        .right {
            margin-left: 300px;
            /* overflow: hidden; */
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="left">第一个div</div>
    <div class="right">第二个div</div>
</body>

</html>

2.通过定位实现实现

通过相对定位和绝对定位实现，需要父容器内再包含两个子元素总共三个div。

两个子元素设置绝对定位，父容器设置相对定位。

子元素的第一个div设置宽度,第二个div设置left的值为第一个div子元素的宽度，再设置right:0。

父容器设置相对定位是因为可以让其设置绝对定位的子元素相对它进行移动；给上边的子元素设置绝对定位可以让下边的子元素跟它在同一行。

<!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>两栏式布局</title>
    <style>
        .box {
            position: relative;
            height: 300px;
        }

        .left {
            position: absolute;
            width: 300px;
            height: 100%;
            background-color: skyblue;
        }

        .right {
            position: absolute;
            left: 300px;
            right: 0;
            height: 100%;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">第一个div</div>
        <div class="right">第二个div</div>
    </div>
</body>

</html>

3.通过弹性布局实现

同样需要三个div,一个父容器包含两个子元素。

所有div设置同一高度，父元素设置display:flex。

子元素的第一个div设置 flex: 0 0 300px；第二个div设置 flex: 1 1 auto。

注意：flex 是 flex-grow， flex-shrink， flex-basis三个属性的简写，默认值为 0 1 auto。

flex设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

<!DOCTYPE html>
<html>

<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>两栏式布局</title>
    <style>
        .box {
            display: flex;
        }

        div {
            height: 300px;
        }

        .left {
            background-color: skyblue;
            flex: 0 0 300px;
        }

        .right {
            background-color: pink;
            flex: 1 1 auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">第一个div</div>
        <div class="right">第二个div</div>
    </div>

</body>

</html>

三栏布局

所谓三栏布局即为左右固定，中间自适应。

1.通过浮动实现

左右模块各自向左右浮动，并设置中间模块的margin值使中间模块宽度自适应。

缺点：不支持 middle 部分前置，无法实现中间部分优先加载。

<!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>三栏布局</title>
    <style>
        div {
            height: 300px;
        }

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

        .right {
            float: right;
            width: 200px;
            background-color: pink;
        }

        .middle {
            margin-left: 300px;
            margin-right: 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="left">左边的div</div>
    <div class="right">右边的div</div>
    <div class="middle">中间的div</div>
</body>

</html>

2.通过定位实现

绝对定位元素脱离文档流。

支持middle部分前置，可以实现中间部分优先加载。

缺点：left、right 的高度无法伴随middle 高度的变化而变化。

<!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>三栏布局</title>
    <style>
        .box {
            position: relative;
        }

        .common {
            position: absolute;
            top: 0;
            height: 300px;
            width: 200px;
        }

        .left {
            left: 0;
            background-color: skyblue;
        }

        .right {
            right: 0;
            background-color: pink;
        }

        .middle {
            position: absolute;
            left: 200px;
            right: 200px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="middle">中间的div</div>
        <div class="common left">左边的div</div>
        <div class="common right">右边的div</div>
    </div>
</body>

</html>

3.通过弹性布局实现

利用容器项目order属性

设置父元素 display:flex；再设置子元素的flex。

优点：

① 支持 middle 部分前置，可以实现中间部分优先加载。

② left、right 的高度可以伴随 middle 高度的变化而变化。

<!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>三栏布局</title>
    <style>
        .box {
            display: flex;
            width: 100%;
            height: 300px;
        }


        .left {
            width: 300px;
            order: 0;
            background-color: skyblue;
        }

        .right {
            width: 300px;
            order: 2;
            background-color: pink;
        }

        .middle {
            order: 1;
            flex-grow: 1;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="middle">中间的div</div>
        <div class="left">左边的div</div>
        <div class="right">右边的div</div>
    </div>
</body>

</html>

4.通过网格布局实现

grid使用十分简单，想要了解更多知识可查看--->查看更多。

缺点：

① 不支持middle部分前置，无法实现中间部分优先加载

② left、right 的高度无法伴随 middle 高度的变化而变化

<!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>三栏布局</title>
    <style>
        .box {
            display: grid;
            height: 300px;
            grid-template-columns: 300px auto 300px;
        }


        .left {
            background-color: skyblue;
        }

        .right {
            background-color: pink;
        }

        .middle {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左边的div</div>
        <div class="middle">中间的div</div>
        <div class="right">右边的div</div>
    </div>
</body>

</html>

5.通过table布局实现

缺点：使用较少

① 不支持middle部分前置

② left、right 的高度无法伴随 middle 高度的变化而变化

<!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>三栏布局</title>
    <style>
        .box {
            display: table;
        }

        .common {
            width: 200px;
            height: 300px;
        }

        .left {
            background-color: skyblue;
        }

        .right {
            background-color: pink;
        }

        .middle {
            display: table-cell;
            width: 100%;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="common left">左边的div</div>
        <div class="middle">中间的div</div>
        <div class="common right">右边的div</div>
    </div>
</body>

</html>