圣杯布局&双翼布局

圣杯布局

  1. 圣杯布局通常会再面试题出现

  2. 圣杯布局结构分布

    • 上中左右下的结构

    • 通常我们用float 和relative来进行中间内容的布局

    • 先设置中间内容区域

    • .content{
           padding-left: 200px;
           padding-right: 150px;
           background: green;
           min-width: 500px;
           line-height: 500px;
           
       }
      内左边距以及内右边距

    • 设置中间内容区域为100%

    • .inner{
            
            width: 100%;
            background: gold;
            
        }

    •  

    • 其次设置左右边内容区域：

      • 左右分别进行相对定位使其浮动与文档

      • 左边内容宽=父级内容盒子内左边距的距离

      • 右边内容宽=父级内容盒子右边距的的距离

      • 左边内容左外边距=margin-left=-100%

      • 右边内容左外边距=margin-left=-宽度

      • 左边内容right=宽度

      • 右边内容right=宽度

    • .left,.right{
            position: relative;
        }
        .left{
            width: 200px;
            margin-left: -100%;
            right: 200px;
            background: rgb(164, 59, 11);
        }
        .right{
            width: 150px;
            margin-left: -150px;
            right: -150px;
            background:rgb(245, 179, 234) ;
        }

    • 最后底部去除浮动效果

    • .footer{
            clear: both;
            background: rgb(179, 245, 219);
            height: 50px;
        }

    •  

       

    • <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            text-align: center;
            color: white;
            
          
          }
        .top{
            background-color: blue;
            height: 50px;
            line-height: 50px;
        }
        .content>div{
            float: left;
            height: 500px;
        }
        .content{
            padding-left: 200px;
            padding-right: 150px;
            background: green;
            min-width: 500px;
            line-height: 500px;
            
        }
       
        .content .inner{
            
            width: 100%;
            background: gold;
            
          
      ​
        }
        .left,.right{
            position: relative;
        }
        .left{
            width: 200px;
            margin-left: -100%;
            right: 200px;
            background: rgb(164, 59, 11);
        }
        .right{
            width: 150px;
            margin-left: -150px;
            right: -150px;
            background:rgb(245, 179, 234) ;
        }
        .footer{
            clear: both;
            background: rgb(179, 245, 219);
            height: 50px;
        }
      ​
      </style>
      <body>
          <div class="top"> top</div> 
          <div class="content">
              <div class="inner">inner</div>
              <div class="left">left</div>
              <div class="right">right</div>
          </div>
          <div class="footer">footer</div>
      ​
      ​
      ​
      ​
      </body>

    •  

双翼布局

  1. 特点

    • 上下为通栏，下栏清除浮动

    • 中间为3栏布局，子元素按照中左右顺序float:left

    • 中间内容设置

      • 宽度：100%

    • 左边内容设置

      • 宽度=中间内容元素子元素外左边距margin-left

      • 位置：margin-left=-100%

      • right:宽度

    • 右边内容设置

      • 宽度：中间内容子元素右外边距margin-right

      • 位置：-宽度

      • right=-宽度

  2. 与圣杯布局不同的是再内容区域套了一个父级盒子由内边距变成了外边距

  3. <style>
       *{
           margin: 0px;
           padding: 0px;
       }
    div{
        text-align: center;
        color: white;
    }
    .top,.bottom{
        width: 100%;
        height: 50px;
        background: pink;
        line-height: 50px;
    }
    .content{
        width: 100%;
        height: 500px;
        background: greenyellow;
    }
    .content>div{
        float: left;
    }
    .content .content-inner{
        width: 100%;
        height: 500px;
        background: wheat;
        
    }
    .content .content-inner .inner{
        
        margin-left: 200px;
        margin-right: 200px;
        background:rgb(108, 74, 11);
        height: 500px;
    ​
    }
    .left{
        width: 200px;
        margin-left: -100%;
        right: 200px;
        background: rgb(217, 61, 61);
        height: 500px;
    }
    ​
    .right{
        width: 200px;
        margin-left: -200px;
        height: 500px;
        right: -200px;
        background: rgb(41, 78, 212);
    }
    .bottom{
        clear: both;
    }
      
    ​
    ​
    a
    ​
    </style>
    <body>
        <div class="top">top</div>
        <div class="content">
            <div class="content-inner">
                <div class="inner">inner</div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <div class="bottom">bottom</div>
    ​
    </body>
  4.  

     

     

posted @ 2022-05-03 09:52  炽焱--1  阅读(255)  评论(0)    收藏  举报