圣杯/双飞翼/flex三栏布局

最新推荐文章于 2023-03-31 19:40:43 发布

Haley6

最新推荐文章于 2023-03-31 19:40:43 发布

阅读量110

点赞数

分类专栏：圣杯文章标签： css

本文链接：https://blog.csdn.net/Haley6/article/details/115874781

版权

圣杯专栏收录该内容

2 篇文章 0 订阅

订阅专栏

圣杯/双飞翼/flex布局三栏

代码

```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>圣杯布局</title>
    <!--   <! -- margin+float圣杯布局 - ->
  <style>
    
    html,body{
      min-width:150+150+200px;
      margin: 0;
      padding: 0;
      height: 100%;
    }
    .header{
      height: 100px;
      background:green;
    }
    .container{
      height: 100%;
      padding: 0 200px 0 150px ;
    }
    .center{
      float: left;
      width: 100%;
      height: 100%;
      background-color: #0f0f;
    }
    .left{
      float: left;
      width: 150px;
      height: 100%;
      margin-left: -100%;
      background-color: #f0f;
      position: relative;
      left: -150px;
    }
    .right{
      float: left;
      width: 200px;
      height: 100%;
      margin-left: -200px;
      background-color: #ea1;
      position: relative;
      left: 200px;
    }
    .footer{
      height: 100px;
      clear: both;
      background-color: rgba(47, 150, 150, 0.667);
    }

  </style>
  <div class="header"></div>
  <div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="footer"></div> -->

    <!--   <!- - 双飞翼布局 - ->
    <style>
      html,
      body {
        min-width: 500px;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .header {
        height: 100px;
        background-color: #899;
      }
      .container {
        float: left;
        width: 100%;
        height: 100%;
      }
      .center {
        margin-left: 150px;
        margin-right: 200px;
        height: 100%;
        background-color: #008900;
      }
      .left {
        float: left;
        margin-left: -100%;
        width: 150px;
        height: 100%;
        background-color: #cbcb;
      }
      .right {
        float: left;
        margin-left: -200px;
        width: 200px;
        height: 100%;
        background-color: #bacbac;
      }
      .footer {
        clear: both;
        height: 100px;
        background: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="container">
      <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="footer"></div>
  </body>

    <!- - display:flex布局圣杯 -->

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      .header {
        background-color: #cfc;
        height: 100px;
      }
      .container {
        height: 100%;
        display: flex;
      }
      .center {
        flex: 1;
        height: 100%;
        background-color: green;
      }
      .left {
        flex: 0 0 150px;
        order: -1;
        background-color: red;
      }
      .right {
        flex: 0 0 200px;
        background-color: yellow;
      }
      .footer {
        background-color: brown;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="container">
      <div class="center"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>

圣杯与双飞翼区别

异:

1.body

圣杯是.container包含了.center,.left,.right
双飞翼是.container只包含.center
style

圣杯

在.container上加padding留出两边空间
在.center上加width:100%;
在.left,.right上加浮动,加margin-left(.left为-100%),.right加负自身宽度
在.left,.right上加相对定位,并调整left属性
圣杯用到padding,float,负margin,相对定位

双飞翼

.container加float:left,加width:100%

在.center中设置margin-left/right留出两边空间,width不加100%;

在.left/.right中加左浮动,并且设置与圣杯一样的负margin

双飞翼不使用相对定位,只用正margin, float,负margin

同:
若要颜色显示布局,记得加height,
给body,html加
<stlyle>
{
height:100%;
margin:0;
padding:0;
min-width:...px;
}
</stlyle>
        