【css布局】经典两栏、三栏（圣杯、双飞翼）等布局

最新推荐文章于 2022-04-03 17:18:20 发布

VoiceU

最新推荐文章于 2022-04-03 17:18:20 发布

阅读量212

点赞数 1

分类专栏：总结帖面试文章标签： css css3

本文链接：https://blog.csdn.net/Voiceu/article/details/118769514

版权

总结帖同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

面试

40 篇文章 2 订阅

订阅专栏

本文详细介绍了前端布局中的两栏、三栏布局，以及经典的圣杯布局和双飞翼布局。通过实例代码展示了如何实现这些布局，强调了它们在用户体验和代码优化方面的优势。圣杯布局利用浮动、相对定位和负边距实现三列布局，而双飞翼布局则进一步优化，取消了相对定位，降低了潜在的布局问题。这些布局技术对于前端开发者理解和构建复杂网页布局至关重要。

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

两栏布局

https://www.jianshu.com/p/267239f8e4b2

三栏布局

流体布局

在这里插入图片描述

<body>
  <style>
    .left {
      float: left;
      width: 100px;
      height: 200px;
      background: red;
    }
    .test{
      width: 200px;
      height: 300px;
      background-color: aqua;
    }
    .right {
      float: right;
      width: 200px;
      height: 200px;
      background: blue;
    }

    .main {
      margin-left: 120px;
      margin-right: 220px;
      height: 200px;
      background: green;
    }
  </style>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>
</body>

圣杯布局

在这里插入图片描述

圣杯布局的要求是先把main写出来，为了先渲染主题部分，提高用户的体验，

做法是把左中右三块，放入一个容器内，先写main，

所以要在容器内给两边栏留位置，所以给容器设置padding-left 和right，大小就是边栏宽度，main的宽度自适应，直接设置100%，

两边栏，如果直接写会掉在下面，所以三块全部开启浮动，开启浮动的作用是，当一行里面，宽度足够的情况下，所有浮动的盒子会挨着排列，不会单开一行，
但在此时，显然main一个就占满了，后面的要想挤到预留的padding位置，就要使用margin-left: -？px 了

对于left
margin-left: -100%;
对于right
margin-left: -190px;
这样可以让他们回到容器的宽度的两侧，100%是相对于父元素的

并且开启relative，然后调整left和right，挪动边栏，就能成功

<body>
  <!-- 
    圣杯布局
    要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
    好处：重要的内容放在文档流前面可以优先渲染
    原理：利用相对定位、浮动、负边距布局，而不添加额外标签
   -->
  <style>
    .container {
      padding-left: 190px;
      padding-right: 190px;
      height: 200px;
    }

    .main {
      float: left;
      width: 100%;
      background: rgb(140, 184, 134);
      height: 200px;
    }

    .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -190px;
      background: rgb(194, 120, 120);
      height: 100px;
    }

    .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
      background: rgb(110, 86, 197);
      height: 100px;
    }
  </style>
  <div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</body>

流程如下：
只给容器加padding，然后main宽度100%时
在这里插入图片描述
然后设置margin-left: -100%;和margin-left: -190px;

然后跳转两边栏位置

position: relative;
left: -190px;
right: -190px;

在这里插入图片描述

双飞翼布局

在这里插入图片描述

这是圣杯布局的优化，取消了relative，预防以后出现其他bug
道理都是相同的，都是先把边栏位置留出，然后把main先放上去
全部float，只不过前面是padding留位置，这个是margin留位置，

<body>
  <!-- 
    双飞翼布局
      双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局
      原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。
   -->
  <style>
    .main-wrap {
      width: 100%;
      float: left;
      height: 400px;
    }
    
    .main {
      margin-left: 190px;
      margin-right: 190px;
      height: 400px;
      background: rgb(121, 127, 134);
    }

    .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      background: rgb(184, 157, 134);
      height: 200px;
    }

    .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      background: rgb(184, 134, 169);
      height: 200px;
    }
  </style>
  <div class="main-wrap">
    <div class="main"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</body>