前段基础笔记

最新推荐文章于 2025-12-16 21:51:40 发布

原创最新推荐文章于 2025-12-16 21:51:40 发布 · 105 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #servlet

六、圣杯布局&双飞翼布局

概述：圣杯布局源于国外，双飞翼布局是经过淘宝UED优化对于圣杯布局的优化，都是经典的三栏式布局的解决方案

圣杯布局和双飞翼布局都是为了实现左右两栏固定宽度，中间部分自适应的三栏布局，不过两者实现的原理有所不同

实现要点：

先加载中间列，结构中--左-右
显示结果是左-中-右
中间自适应，两侧列固定

圣杯布局

实现步骤

1）HTML结构中——先中间内容后侧边栏
2）两侧宽度固定，中间宽度设置100%
3）中间内容和左右两侧分别加浮动 float:left;
4) 将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到右边（margin-left: -右侧盒的宽度）
5）通过父盒将左右盒子的位置露出来（在父盒上设置padding: 0 右侧盒子宽度 0 左侧盒子宽度）
6）分别还原左侧盒和右侧盒
- 将左侧列移动至对应位置（position:relative; 左侧盒设置left属性，值为-左侧盒宽度；）
- 将右侧列移动至对应位置（position:relative; 左侧盒设置left属性，值为右侧盒宽度；）
7）父盒容器设置最小宽度，防止中间列消失

<!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;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .wrap {
            height: 420px;
            background-color: aquamarine;
            /* 将左右盒子的位置露出来 */
            padding: 0 200px;
            /* 解决当宽度到很小的问题 */
            min-width: 200px;
        }

        .wrap div {
            float: left;
        }

        .wrap .center {
            width: 100%;
            height: 390px;
            background-color: blue;
        }

        .left {
            width: 200px;
            height: 400px;
            background-color: tomato;
            margin-left: -100%;
            position: relative;
            left: -200px;

        }

        .right {
            width: 200px;
            height: 400px;
            background-color: pink;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
    </style>
</head>

<body>
    <div class="wrap clearfix">
        <div class="center">center主体内容</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

双飞翼布局

双飞翼布局，始于淘宝 UED。如果把三栏布局比作一只鸟，可以把 main 看成是鸟的身体，left 和 right 则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。

实现步骤

1）HTML结构中——先中间结构（主体结构中要有主体内容盒，主体内容盒里嵌套一个子盒）后侧边栏
2）两侧盒子固定宽度，中间主体结构盒宽度100%；
3）中间结构盒和左右两侧设置浮动 float: left;
4）将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到最右边（margin-left: -右侧盒宽度）
5）在中间主体结构盒的子盒上设置margin值将中间内容露出来（margin: 0 右侧边宽度 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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .wrap {
            height: 420px;
            background-color: aquamarine;
            min-width: 400px;
        }

        .wrap>div {
            float: left;
        }

        .wrap .center {
            width: 100%;
            height: 395px;
            background-color: blue;


        }

        .wrap .center .inner {
            height: 380px;
            background-color: yellowgreen;
            /* 把左右盒子的位置留出来 */
            margin: 0 200px;
        }

        .wrap .left {
            width: 200px;
            height: 400px;
            background-color: tomato;
            margin-left: -100%;
        }

        .wrap .right {
            width: 200px;
            height: 400px;
            background-color: pink;
            margin-left: -200px;
        }
    </style>
</head>

<body>

    <div class="wrap clearfix">
        <div class="center">
            <div class="inner">
                main主体内容
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

</body>

</html>