面试经常考的布局(CSS布局 -- 圣杯布局 & 双飞翼布局)

按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。

在这里,实现了左(300px) 右(300px) 宽度固定,中间自适应,container部分高度保持一致。

下面我写了物种常用的方式:

通用样式

      html *{
        margin:0;
        padding:0;
      }
      .layout{
        height:200px;
        background:yellow;
        margin-bottom:20px;
        color:#fff;
        font-size:22px;
        line-height:200px;
        text-align:center;
      }
复制代码

一:float布局


      
"float layout">
"left">float布局-left
"right">float布局-right
"middle">float布局-middle
复制代码

/*float布局*/
      .float div{
        height:200px;
      }
      .float div.left{
        background:red;
        float:left;
        width:300px;
      }
      .float div.middle{
        background:#000;
      }
      .float div.right{
        background:green;
        float:right;
        width:300px;
      }
复制代码

二:position 布局


      
"position layout">
"left">position布局-left
"middle">position布局-middle
"right">position布局-right
复制代码

/*position 布局*/
      .layout{
        position: relative;
      }
      .position div{
        height:200px;
      }
      .position div.left{
        position: absolute;
        background:red;
        width:300px;
        left:0;
        top:0;
      }
      .position div.middle{
        position: absolute;
        background:#000;
        right:300px;
        top:0;
        left:300px;
      }
      .position div.right{
        position: absolute;
        background:green;
        width:300px;
        right:0;
        top:0;
      }
复制代码

三:table-cell布局


      
"table-cell layout">
"left">table-cell布局-left
"middle">table-cell布局-middle
"right">table-cell布局-right
复制代码

/*table-cell布局*/
      .table-cell{
        display:table;
        width:100%;
      }
      .table-cell div{
        height:200px;
        display:table-cell;
      }
      .table-cell div.left{
        width:300px;
        background:red;
      }
      .table-cell div.middle{
        background:#000;
      }
      .table-cell div.right{
        width:300px;
        background:green;
      }
复制代码

四:flex 布局


      
"flex layout">
"left">flex布局-left
"middle">flex布局-middle
"right">flex布局-right
复制代码

/*flex 布局*/
      .flex{
        display:flex;
      }
      .flex div{
        height:200px;
      }
      .flex div.left{
        background:red;
        width:300px;
      }
      .flex div.right{
        width:300px;
        background:green;
      }
      .flex div.middle{
        background:#000;
        flex:1;
      }
复制代码

五:grid 网格布局


      
"grid layout">
"left">grid网格布局-left
"middle">grid网格布局-middle
"right">grid网格布局-right
复制代码

/*grid 网格布局*/
      .grid{
        display:grid;
        grid-template-columns: 300px auto 300px;
      }
      .grid div.left{
        background:red;
      }
      .grid div.middle{
        background:#000;
      }
      .grid div.right{
        background:green;
      }
复制代码

当然了还可以用其他方式,这里只写了常规的,面试经常会问到,能说出这几种也还是不错的,这个题还可以延伸,比如Dom渲染顺序的调整,需要将middle 自动调整宽度的内容先渲染出来,这样Dom的顺序就必须放在其他left、right两个div模块的前面排第一,这样你又能写出几种。

github地址:github.com/miqidian/la…


你可能感兴趣的:(面试经常考的布局(CSS布局 -- 圣杯布局 & 双飞翼布局))