圣杯布局、双飞翼布局、弹性布局实现的两边定宽，中间不定宽

最新推荐文章于 2022-12-15 21:15:30 发布
最新推荐文章于 2022-12-15 21:15:30 发布
阅读量346 收藏
点赞数 1
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45108358/article/details/120736741
版权

圣杯布局、双飞翼布局、弹性布局实现的两边定宽，中间不定宽

圣杯布局

<body>
    <header>头部</header>
    <div class="box clearfix">
        <div class="center">中间</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <footer>底部</footer>
</body>

中间部分在HTML结构上优先。

第一步

三个盒子设置浮动，清除浮动效果

        .left,
        .right,
        .center {
            float: left;
        }

第二步

左右盒子设置固定宽度，中间盒子设置为100%

        .left,
        .right {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .center {
            height: 200px;
            width: 100%;
            background-color: skyblue;
        }

在这里插入图片描述

第三步

左盒子设置margin-left：-100%，右盒子设置margin-left：-自身宽度；

        .left {
            position: relative;
            margin-left: -100%;
        }
         .right {
            position: relative;
            margin-left: -200px;
        }

在这里插入图片描述

为了解决左右盒子压盖中间盒子，应该让左盒子和右盒子再向外移动。但是因为中间盒子设置了100%，左右盒子再向外移动会出现滚动条。

第四步

在三个盒子的外面包裹一个大的盒子。设置大盒子的左右padding为左右盒子的宽度。

     .box {
            padding: 0 200px;
            text-align: center;
            min-width: 600px;
            /* 为了避免采用默认内容盒尺寸进行转换计算 */
            box-sizing: border-box;
           }

在这里插入图片描述

第五步

左盒子通过相对定位向左移动自身宽度，右盒子通过相对定位向右移动自身宽度。

    .left {
            position: relative;
            left: -200px;
            margin-left: -100%;
        }
         .right {
            position: relative;
            right: -200px;
            margin-left: -200px;
        }

在这里插入图片描述

整体代码

<!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>
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
        
        .box {
            padding: 0 200px;
            text-align: center;
            min-width: 600px;
            /* 为了避免采用默认内容盒尺寸进行转换计算 */
            box-sizing: border-box;
        }
        
        header,
        footer {
            height: 200px;
            background: cadetblue;
        }
        
        .left,
        .right {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        
        .left,
        .right,
        .center {
            float: left;
        }
        
        .center {
            height: 200px;
            width: 100%;
            background-color: skyblue;
        }
        
        .left {
            position: relative;
            left: -200px;
            margin-left: -100%;
        }
        
        .right {
            position: relative;
            right: -200px;
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <header>头部</header>
    <div class="box clearfix">
        <div class="center">中间</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <footer>底部</footer>
</body>

</html>

双飞翼布局

<body>
    <header>我是头部信息</header>
    <div class="center">
        <div class="box">
            中
        </div>
    </div>
    <div class="left">左</div>
    <div class="right">右</div>
    <footer style="clear: left;">我是底部信息</footer>
</body>

第一步

三个盒子设置浮动，并清除浮动效果

        .center,
        .left,
        .right {
            float: left;
        }

这里的清除浮动是采用的方式

  <footer style="clear: left;">我是底部信息</footer>

还可以采用伪元素

例子

.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}

第二步

左右盒子设置固定宽度，中间盒子设置为100%

        .left,
        .right {
            width: 200px;
        }
        
        .center {
            width: 100%;
        }

第三步

左盒子设置margin-left：-100%，右盒子设置margin-left：-自身宽度；

       .left {
            background-color: hotpink;
            margin-left: -100%;
        }
        
        .right {
            background-color: brown;
            margin-left: -200px;
        }

为了解决左右盒子压盖中间盒子，应该让左盒子和右盒子再向外移动。但是因为中间盒子设置了100%，左右盒子再向外移动会出现滚动条。

以上步骤与圣杯布局一样，效果一样，这里不再展示效果，可以参考上面效果

第四步

在中间盒子中再嵌套一个小盒子，将内容放入小盒子中，里面小盒子的margin去撑开。

        .box {
            margin: 0 200px;
        }

在这里插入图片描述

整体代码

<!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;
        }
        body {
            font-size: 40px;
            text-align: left;
            line-height: 200px;
        }
        header,
        footer {
            height: 200px;
            background-color: cadetblue;
        }
        .center,
        .left,
        .right {
            float: left;
        }
        .left,
        .right {
            width: 200px;
        }
        .center {
            width: 100%;
        }
        .center {
            background-color: mediumslateblue;
        }
        .left {
            background-color: hotpink;
            margin-left: -100%;
        }
        .right {
            background-color: brown;
            margin-left: -200px;
        }
        .box {
            margin: 0 200px;
        }  
        .clearfix::after {
            display: block;
            content: "";
            clear: both;
        }
    </style>
</head>
<body>
    <header>我是头部信息</header>
    <div class="center">
        <div class="box">
            中
        </div>
    </div>
    <div class="left">左</div>
    <div class="right">右</div>
    <footer style="clear: left;">我是底部信息</footer>
</body>
</html>

圣杯布局与双飞翼布局的总结

  1. 圣杯布局是在外层嵌套一个大盒子，利用大盒子的padding+左右盒子的相对定位去实现。
  2. 双飞翼是在中间层嵌套一个小盒子，利用小盒子的margin去实现。

弹性盒子的实现方式

  <body>
    <header>我是头部信息</header>
    <div class="box">
        <div class="center">中</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
    <footer style="clear: left;">我是底部信息</footer>
</body>

第一步

父盒子设为弹性盒

       .box {
            display: flex;
        }

在这里插入图片描述

第二步

左右盒子固定宽度

       .left,
        .right {
            width: 200px;
            background-color: brown;
        }

在这里插入图片描述

第三步

中间盒子设置 flex-grow：1

       .center {
            flex-grow: 1;
            background-color: lightgreen;
        }

在这里插入图片描述

第四步

设置左盒子的order为-1；
order是主要用于弹性盒子中的排序，order越小盒子越靠前

       .left {
            order: -1;
        }

在这里插入图片描述

整体代码

<!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;
        }
        body {
            font-size: 40px;
            text-align: center;
            line-height: 200px;
        }
        header,
        footer {
            height: 200px;
            background-color: cadetblue;
        } 
        .box {
            display: flex;
        }
        .left,
        .right {
            width: 200px;
            background-color: brown;
        }  
        .left {
            order: -1;
        }      
        .center {
            flex-grow: 1;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <header>我是头部信息</header>
    <div class="box">
        <div class="center">中</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
    <footer style="clear: left;">我是底部信息</footer>
</body>
</html>
又菜又不想学的小张
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端经典的布局方式、圣杯、双飞翼、弹性布局
垂钓老翁的博客
04-08 152
实现效果：左右固定，中间伸缩。 1、圣杯布局： 代码如下： <!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-scal
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局，感兴趣的朋友一起学习吧
双飞翼布局（圣杯布局）介绍-始于淘宝UED
weixin_30848775的博客
05-09 100
仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用： 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。 尝试之路考虑以下DOM结构： <div id="page"> ...
圣杯布局详解（中间盒子宽度自适应，两边盒子固定宽度）
weixin_41796631的博客
04-22 2568
总结： 主要通过设置 margin: -100%，使本来浮动在第二行的盒子，回到第一行，使这个元素可以和 width: 100% 的浮动盒子并列； 浮动 float 的原理： （float，浮动，使元素的边界和相邻的同一个方向浮动的元素边界紧贴，如果没有相邻浮动元素，就和父元素边界紧贴。也就是说，设置了 float：left 的元素，会向左浮动，直到左边缘和同样设置了 float：left...
Flex布局-学习笔记
weixin_43482965的博客
03-01 515
1.传统布局与flex布局 (1)传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 (2)flex 弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC 端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 2.flex布局简要 （1）flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 fle...
Flex布局
weixin_45938306的博客
07-18 572
1.什么是flex布局 flex表示弹性布局，为盒模型提供最大的灵活性。 2.flex布局的一些基本概念 容器：采用flex布局的元素被称为容器 项目：在flex布局中的子元素被称为项目 项目要在容器中显示，在容器中有水平的主轴和垂直的交叉轴，项目在容器中沿主轴排列 3.容器的一些属性 1.flex-direction：设置容器主轴的方向，元素根据主轴排列。 row：默认值，沿水平方向，从左到右 row-reverse：沿水平方向，从右到左 column：垂直方向，由上到下 column-revers
双飞翼布局和圣杯布局
01-08
双飞翼布局和圣杯布局  网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。  首先三...
如何做出双飞翼布局与圣杯布局
01-08
说起网站布局，之前一个做PS设计的朋友说过“网站布局”不就和我做图片一样，把各种需要的组件一摆，然后设个宽高给个定位不就...而今天我们的主题，“双飞翼布局”与“圣杯布局”就是一个两边固定，中间宽度自适应，并
前端vue实现双飞翼布局【flex布局和浮动布局】
在写作的路上持续输出。
06-26 1008
前端vue实现双飞翼布局【两种方案】一🚀
弹性布局实现两边固定中间自适应
my_love_download的博客
12-15 1153
记录两边固定中间自适应布局 html代码 <div class="all-box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> <div> 弹性布局实现 <style> .all-box { display: flex; height: 200px; } .le
flex实现弹性布局，类似双飞翼布局
panggan666的博客
07-06 88
之前一直以为响应式布局只要能够随着屏幕宽度变化就好，后面才意识到响应式布局应该是要优先加载主区域再加载两侧，今天就写了一个DIV排版的flex响应式布局
圣杯布局02-两侧定位+中间不设置宽度（margin/padding）
bubbleTg的博客
10-11 150
什么是圣杯布局 圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。 圣杯布局要求 header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。 三栏布局两侧宽度固定不变，中间部分自
圣杯布局
qq_44960253的博客
04-18 954
两种 CSS 布局 圣杯布局与双飞翼布局是需要掌握的两种重要的布局方式。 两种的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。常见于电商平台。 淘宝 圣杯布局来源于国外文章In Search of The Holy Grail，双飞翼布局来源于淘宝 UED 遵循特点： 两侧宽度固定，中间宽度自适应 中间部分在 DOM 结构上优先，以便先行渲染（因为一般情况下中间部分的...
不用CSS3的弹性盒模型实现双飞翼布局
hanmou7的博客
06-23 410
html> html lang="en"> head> meta charset="UTF-8"> title>双飞翼布局（用于管理系统，淘宝在用，低版本浏览器）title> style> *{ margin: 0; padding: 0; } .main{
弹性盒子，双飞翼
weixin_51666715的博客
12-10 318
text-align属性 text-align 这个属性可以设置行内元素横向居中 代码及规范 <style> p{ width: 300px; height: 300px; border: 1px solid; text-align: center; } </style> </head> <body> <p> <span>我可以通过text-align这个属性
弹性盒布局
weixin_46022220的博客
12-15 151
（1）flex-start （默认值）：左对齐。（2）flex-end：右对齐。（3）center： 居中。（4）space-between：两端对齐，项目之间的间隔都相等。（4）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的 间隔大一倍。（5）space-evenly：所有间隔都相等，包括项目与项目，项目与边框。
经典三栏布局之圣杯、双飞翼、弹性布局
Z0867的博客
08-26 129
经典三栏布局之圣杯、双飞翼、弹性布局 圣杯布局和双飞翼布局是前端工程师需要掌握的布局方式，两者功能相同，都是为了实现两侧宽度固定，中间宽度自适应的布局方式，此外，使用新增的flex布局，可以使布局更加简单。 双飞翼布局和圣杯布局虽然实现方式有所差异，但是基本上都遵循了以下几点： 两侧宽度固定，中间宽度自适应 中间结构在DOM上优先，以便于优先渲染 下面依...
圣杯布局原来这么简单！！
qq_45473786的博客
03-04 685
文章目录什么是圣杯布局圣杯布局的特点怎么实现圣杯布局完整代码展示 什么是圣杯布局 圣杯布局是一个两侧宽度固定，中间宽度自适应的三栏布局 圣杯布局的特点 中间部分在DOM结构上优先，以便先行渲染 允许三列中的任意一列成为最高列（三列高度不一样并且可以以任一列的高度为最高） 怎么实现圣杯布局 写下HTML代码 <div class="container"> &lt...
圣杯布局基础
m0_61282942的博客
07-30 90
圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。效果图 原本录制了一个小视频，奈何不能上传到博客中，视频中通过缩放页面可以发现随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不
圣杯布局 双飞翼布局
最新发布
09-11
圣杯布局和双飞翼布局都是网页...总的来说，圣杯布局和双飞翼布局都是为了实现网页的三栏布局，中间栏自适应宽度，左右侧边栏固定宽度。两种布局方式在DOM结构上略有不同，开发者可以根据具体需求选择适合的布局方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值