HTML布局方式（静态布局，弹性盒子布局，双飞翼布局，圣杯布局）

zhong_333

于 2023-08-23 19:18:37 发布

阅读量447

点赞数 1

文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/zhong_333/article/details/132458984

版权

本文介绍了三种常见的网页布局技术：盒子布局使用div设置版心宽度居中，圣杯布局利用浮动实现左右两侧内容和中间区域的动态调整，双飞翼布局在圣杯的基础上增加了内层div以实现更灵活的自适应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，我们要知道现在讨论的三种布局方式都是为了实现框架的版心区域居中，在缩放页面的时候先减少两侧的空白区域，最后在让中间区域增加滚动条。

1.盒子布局

盒子布局是我们现在主流的布局方式，主要是使用多个div盒子，设置中间版心区域的宽度，然后设置居中，使俩边不存在任何内容，从而实现版心区域的设置。

代码示例：

（给版心区域设置高度是为了展示效果---正常页面不用设置高度）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .w{
            width: 1400px;
            margin: 0 auto;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="w"></div>
</body>
</html>

页面：

这样设置是比较简单方便的，之间添加版心块就可以了

2.圣杯布局

主要是利用浮动（float）实现页面的布局效果

html代码：

<div class="container">
    <div class="middle">
        圣杯布局中
    </div>
    <div class="left">
        圣杯布局左
    </div>
    <div class="right">
        圣杯布局右
    </div>
</div>

css代码：

.left,
.middle,
.right{ 
    position: relative;
    float: left;
}
.container{
    padding:0 200px 0 200px;
    overflow: hidden;
}
.container div{
    height: 100px;
}
.left,.right{
    width: 200px;
    background: red;
}
.left{
    margin-left: -100%;
    left: -200px;
}
.right{
    margin-left: -200px;
    right: -200px;
}
.middle{ 
    width: 100%;
    background: blue;
}

页面展示：

3.双飞翼布局

主体和圣杯布局相似，只不过在实现中间部分自适应的方式有所区别,这种方式多嵌套了一个div.

html代码：

    <div class="center">
        <div class="center-inner">
            双飞翼布局 中
        </div>
    </div>
    <div class="left">
        双飞翼布局 左
    </div>
    <div class="right">
        双飞翼布局 右
    </div>

css代码：

        .left,
        .center,
        .right {
            float: left;
            height: 800px;
        }

        .left {
            margin-left: -100%;
            width: 200px;
            background: red;
        }

        .right {
            margin-left: -200px;
            width: 200px;
            background: red;
        }

        .center {
            width: 100%;
            background: green;
            
        }
        .center-inner {
            margin-left: 200px;
            margin-right: 200px;
        }

页面展示：