从每行代码带你分析双飞翼布局与圣杯布局，教你快速记忆

supmyre

已于 2023-04-25 21:09:48 修改

阅读量122

点赞数

分类专栏：前端面试文章标签： javascript css 前端

于 2023-04-25 12:00:00 首次发布

本文链接：https://blog.csdn.net/qq_43498949/article/details/130352999

版权

前端面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
双飞翼布局手撕代码
圣杯布局手撕代码：
代码
- 双飞翼布局
- 圣杯布局

前言

双飞翼布局与圣杯布局是PC端常见的布局方式，也是前端面试常考的题目。本文按照所写代码一步步运行，叫你看清楚其中的细节，从而更好记住他们。

提示：以下是本篇文章正文内容，下面案例可供参考

双飞翼布局手撕代码

基础布局

在这里插入图片描述

1、中间部分外部使用一层div进行包裹（注意这是双飞翼布局与圣杯布局在html布局上面的区别）
2、左边与右边都设置宽度，中间部分设置宽度为100%，之后可以根据页面进行响应式变化。

<!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>
        .center{
            width: 100%;
            background-color: yellow;
            
        }
        .left{
            width: 100px;
             background-color: red;
        }
        .right{
            width: 200px;
            background-color: pink;
            
        }
        
    </style>
</head>
<body>
    <div class="center float">
        <div style="margin-left: 100px;margin-right: 200px;">中间</div>
    </div>
    <div class="left float">左边</div>
    <div class="right float">右边</div>
</body>
</html>

设置浮动

 .float{
            float: left;
        }

在这里插入图片描述
由于此时中间width是100%，因此左边与右边不会浮动上去。
但是实际上是这种结构，只是中间宽度占满了：

设法让左边部分浮动上去。

聪明的你已经想到了，如果要把左边的放到屏幕左边，只需要设置margin-left，由于body的宽度是100%，margin-left相当于附近宽度，设置-100%就放到了左边。

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

在这里插入图片描述

设法让右边移动过去。

此时的页面结构，由于左边移过去了，右边部分顶替上来，但是由于黄色部分占据的整个部分，右边部分仍然不会出现在屏幕中。
在这里插入图片描述

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

设置margin-left为宽度即可

圣杯布局手撕代码：

布局方式

<div >
        <div class="center float">中间</div>
        <div class="left float">左边</div>
        <div class="right float">右边</div>
    </div>

基础样式：
在这里插入图片描述

    <!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>
        .center{
        width:100%;
        background-color: yellow;
    }
    .left{
        width:100px;
        background-color: red;
       
    }
    .right{
        width: 200px;
        background-color: pink;
        
    }
    .float{
        float: left;
    }
    </style>
</head>
<body >
    <div >
        <div class="center float">中间</div>
    <div class="left float">左边</div>
    <div class="right float">右边</div>
</div>
</body>
</html>

重要的一步！！设置父级元素的padding

.wrap{
        padding-left: 100px;padding-right: 200px;min-width: 500px
    }

让左边的盒子左移：

由于父级元素设置了padding，宽度相比较分别减少
在这里插入图片描述
在设置了margin-left,width此时已经100%之后：

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

在这里插入图片描述
需要在left中设置一个定位，此处用relative，表示相对于元素本身：

 .left{
      width:100px;
      background-color: red;
      margin-left: -100%;
      position: relative; 
       right: 100px;
  }

在这里插入图片描述

让右边的盒子移过去：

此时盒子的布局：
在这里插入图片描述
其实此时已经是理想的布局，但是由于设置了padding-right，需要将元素“显现”出来：

.right{
      width: 200px;
      background-color: pink;
      margin-right: -200px;
  }

有的同学纳闷，为什么双飞翼布局设置margin-left，圣杯布局设置margin-right？
请看本人这篇文章。
面试常考！！！margin-left与margin-right设置负值的区别

在这里插入图片描述
简而言之呢，双飞翼布局由于center与right不在一个父元素下，是属于实打实的移动，需要移动到屏幕中，所以使用left。而圣杯布局是在一个父元素下，只是由于设置了padding-right，导致元素无法显现出来，此时需要将元素显现出来而已，就是上面文章所说的只是看起来移动了而已。

代码

双飞翼布局

<!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>
     .center{
         width: 100%;
         background-color: yellow;
         
     }
     .left{
         width: 100px;
          background-color: red;
         margin-left: -100%; 
     }
     .right{
         width: 200px;
         background-color: pink;
         margin-left:-200px;
         
     }
     .float{
         float: left;
     }
 </style>
</head>
<body>
 <div class="center float">
     <div style="margin-left: 100px;margin-right: 200px;">中间</div>
 </div>
 <div class="left float">左边</div>
 <div class="right float">右边</div>
</body>
</html>

圣杯布局

<!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>
     .center{
     width:100%;
     background-color: yellow;
 }
 .left{
     width:100px;
     background-color: red;
     margin-left: -100%;
     position: relative; 
      right: 100px;
 }
 .right{
     width: 200px;
     background-color: pink;
     margin-right: -200px;
 }
 .float{
     float: left;
 }
 .wrap{
     padding-left: 100px;padding-right: 200px;min-width: 500px
 }
 </style>
</head>
<body >
 <div class="wrap">
     <div class="center float">中间</div>
 <div class="left float">左边</div>
 <div class="right float">右边</div></div>
</body>
</html>