圣杯布局和双飞翼布局

一颗西柚酱

2024-04-22 帮助1人

圣杯布局

刚学圣杯双飞翼布局，有点蒙，特写下来加深印象

首先要明确圣杯布局和双飞翼布局要解决的问题是什么？

要解决的就是让浏览器先加载最总要的那部分给客户看，我们做前端开发的时候要切合实际场景开发，合理布局，给客户最优的体验。

圣杯布局和双飞翼布局就是让浏览器先加载中间最重要的内容给客户看！！

二者特点：

同：两种布局都将将盒子设置为左浮动，同时在HTML中盒子加载的顺序都是中左右，给定中间容器100%的宽度让其可以随着页面宽度的变化而变化。然后再用左边距将左右容器覆盖在中间容器边上。

异：当将三个容器拉到同一行时，圣杯布局是调整左右容器（margin）的位置，用相对定位（relative）的方式将左右容器移出中间容器。飞翼布局是给中间容器再套一层内层容器，将内容在内层容器中显示，而不是在中间容器中。

圣杯布局

初始化圣杯布局


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

    </div>

css

  <style>
        .container {
            box-sizing: border-box;
            height: 400px;
            width: 100%;
            background-color: pink;

        }

        .center {
            background-color: red;
            width: 100%;
            height: 100px;
            
        }

        .left {
            background-color: green;
            width: 50px;
            height: 100px;
           
        }

        .right {
            background-color: blue;
            width: 100px;
            height: 100px;
           
            
        }
    </style>

学新通

给container设置padding

container {
            box-sizing: border-box;
            //左边是left宽度，right同理
            padding-left: 50px;
            padding-right: 100px;
            height: 400px;
            width: 100%;
            background-color: pink;

        }

学新通

到了这一步，就可以策划移动了

1、首先要让三个盒子float，那么 left和right会同行
2、把left移到左边
2.1 margin-left：-100%；
学新通

2.2 然后利用position：relative进行移动

   .left {
            background-color: green;
            position: relative;
            margin-left: -100%;
            left: -50px;
            width: 50px;
            height: 100px;
            float: left;

        }

学新通
3.把right盒子移到右边
margin-left：-自身宽度px
position：relative
right：-自身宽度px

 .right {
            background-color: blue;
            margin-left: -100px;
            position: relative;
            right: -100px;
            width: 100px;
            height: 100px;
            float: left;

        }

学新通

tips：上述代码中 margin-left: -100% 相对的是父元素的 content 宽度，即不包含 paddig 、
border 的宽度。

双飞翼布局

初始化代码

 <style>
        /* .column宽度设置和浏览器的窗口同宽，这样，main就会随着窗口的大小变化而变化了 */
        .column {
         
            width: 100%;
        }

        .main {
            height: 100px;
            margin: 0 100px 0 100px;
            background-color: red;
        }

        .left {
            height: 100px;
            width: 100px;
            background-color: pink;
        }

        .right {
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>


</head>

<body>
    <div class="box column">

        <div class="main"></div>
    </div>
    <div class="left column">1</div>
    <div class="right column">2</div>

学新通

接下来就可以想办法把左右两个盒子移上去了

有什么办法呢？
双翼布局不需要设置绝对定位，只需要浮动 margin移动
学新通

//这里是有变化的代码，要让left盒子移上去，只需要浮动和margin
 .column {
            float: left;
            width: 100%;
        }


   .left {
            height: 100px;
            width: 100px;
            background-color: pink;
            margin-left: -100%;

        }

这里是移动了右盒子（-自身宽度px）
margin-left: -100px;
学新通

完整代码


    <style>
        /* .column宽度设置和浏览器的窗口同宽，这样，main就会随着窗口的大小变化而变化了 */
        .column {
            float: left;
            width: 100%;
        }

        .main {
            height: 100px;
            margin: 0 100px 0 100px;
            background-color: red;
        }

        .left {
            height: 100px;
            width: 100px;
            background-color: pink;
            margin-left: -100%;



        }

        .right {
            height: 100px;
            width: 100px;
            background-color: pink;
            margin-left: -100px;




        }
    </style>


</head>

<body>


    <div class="box column">

        <div class="main"></div>
    </div>

    <div class="left column">1</div>
    <div class="right column">2</div>





</body>

这篇好文章是转载于：学新通技术网

圣杯布局和双飞翼布局

圣杯布局

圣杯布局

初始化圣杯布局

给container设置padding

到了这一步，就可以策划移动了

双飞翼布局

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐