网页中三栏布局的常用方法：圣杯布局，双飞翼布局，弹性盒子布局三栏。

最新推荐文章于 2022-09-01 15:00:44 发布

三岁九年

最新推荐文章于 2022-09-01 15:00:44 发布

阅读量262

点赞数

分类专栏： html5 css3 文章标签： html

本文链接：https://blog.csdn.net/xh0112/article/details/111582125

版权

本文介绍了网页三栏布局的三种常见方法：圣杯布局、双飞翼布局和弹性盒子布局。圣杯布局利用浮动定位，通过负margin和padding实现；双飞翼布局则使用浮动和margin，中心部分再加一个内嵌div调整；弹性盒子布局最为简便，通过flexbox的定位顺序和伸缩属性轻松实现三栏布局。

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

圣杯布局

利用浮动定位进行布局

<header>header</header>
    <div class="clearfix">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>

在主体内部外面嵌套了一个div
center在结构上靠前
center，left，right都浮动
清除浮动
center宽度为100%，left，right宽度固定
left通过margin-left为负值（-100%），移动到center最左边
right通过margin-left为负值（自身的宽度），移动到center的最右边。
center的内容会被left，right遮盖
最外层div添加一个padding，padding的宽度为left，right的宽度。
left，right相对定位，移动到相应的位置。位移量为自身的宽度。

        * {
   
            /* 清零样式 */
            margin: 0;
            padding: 0;
        }
        body {
   
            font-size: 50px;
            /* 设置body的最小宽度 */
            min-width: 620px;
            /* 设置body的最大宽度 */
        }
        header,
        footer {
   
            width: 100%;
            height: 100px;
            background-color