前端页面布局之双飞翼布局

双飞翼布局分为左，中，右三个部分。左右宽度固定，中间部分自适应三个部分通过按顺序向左浮动实现。效果:设置父元素相对布局，用来实现内部元素的绝对布局。效果：将注释内的内容加上：作用是1.盒模型的尺寸（宽高）是包含content、padding、border全部在内的尺寸；2.将所有元素的外边距设置为0效果：效果：...............

一只爱吃萝卜的小兔子

1637人浏览 · 2022-07-13 18:48:30

一只爱吃萝卜的小兔子 · 2022-07-13 18:48:30 发布

1.双飞翼布局说明

双飞翼布局分为左，中，右三个部分。
左右宽度固定，中间部分自适应

2.双飞翼布局实例

2.1 双飞翼布局float实现

三个部分通过按顺序向左浮动实现。

<!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>双飞翼布局float实现</title>
    <style>
        body {
            text-align: center;
        }

        /* 双飞翼布局 */
        .left {
            float: left;
            width: 100px;
            height: 500px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 500px;
            background-color: blue;
        }

        .center {
            float: left;
            width: calc(100% - 200px);
            height: 500px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</body>

</html>

效果:
在这里插入图片描述

2.2 双飞翼布局absolute实现

设置父元素相对布局，用来实现内部元素的绝对布局。

<!--
 * @LastEditors: 一只爱吃萝卜的小兔子
 * @Date: 2022-07-13 18:15:23
 * @LastEditTime: 2022-07-13 18:26:34
 * @FilePath: \Web Worker\双飞翼布局absolute实现.html
-->
<!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>双飞翼布局absolute实现</title>
    <style>
        /* * {
            box-sizing: border-box;
            margin: 0;
        } */

        /* 双飞翼布局 */
        body {
            position: relative;
            /* width: 100%; */
        }

        .left {
            position: absolute;
            left: 0;
            width: 100px;
            height: 500px;
            background-color: red;
        }

        .right {
            position: absolute;
            right: 0;
            width: 100px;
            height: 500px;
            background-color: blue;
        }


        .center {
            position: absolute;
            left: 100px;
            width: calc(100% - 200px);
            height: 500px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</body>

</html>

效果：
在这里插入图片描述
将注释内的内容加上：
作用是
1.盒模型的尺寸（宽高）是包含content、padding、border全部在内的尺寸；
2.将所有元素的外边距设置为0

<style>
* {
     box-sizing: border-box;
     margin: 0;
 }
</style>

效果：（点击图片进行查看，可以清楚的看到，最边缘的百边消失了。）
在这里插入图片描述

2.2 双飞翼布局grid网格布局实现

<!--
 * @LastEditors: 一只爱吃萝卜的小兔子
 * @Date: 2022-07-13 18:15:23
 * @LastEditTime: 2022-07-13 18:47:23
 * @FilePath: \Web Worker\双飞翼布局grid网格布局实现.html
-->
<!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>双飞翼布局grid网格布局实现</title>
    <style>
        /* 双飞翼布局 */
        .container {
            text-align: center;
            display: grid;
            grid-template-columns: 100px 1fr 100px;
        }

        /* 双飞翼布局 */
        .left {
            height: 500px;
            background-color: red;
        }

        .right {
            height: 500px;
            background-color: blue;
        }

        .center {
            height: 500px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>

</html>