前端面试必问——四种布局

635 阅读1分钟

前言

这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战

自我总结,仅供参考,求点赞,谢谢

面试常问的四种布局:两栏布局三栏布局圣杯布局双飞翼布局

两栏布局

一侧固定,一侧自适应

两栏布局.png

思路

  1. 浮动(float) + 外边距(margin)
  2. 绝对定位(float)+ 外边距(margin)
  3. 弹性布局(flex)

代码实现

1. 浮动或定位
<body>

    <div class="left"> Left </div>
    <div class="right" >Right </div>

</body>
<style>

    * {
        margin: 0;
        padding: 0;
    }
    body {
        min-width: 500px
    }

   .left {
   
     // float: left;      // 1.  浮动
     position:absolute;  // 2.  绝对定位,父级没有定位元素,则以body定位
     
     
      width: 100px;
      height: 200px;
      background-color: pink;
   }
   .right {
      margin-left: 100px;
      background-color: skyblue;
      min-height: 200px;
   }
</style>
2. 弹性布局
<style>

    * {
        margin: 0;
        padding: 0;
    }
    body {
        min-width: 500px
        display: flex;  //父级元素设置 display:flex
    }
   .left {
 
      width: 100px;
      height: 200px;
      background-color: pink;
   }
   .right {
      flex: 1;  //即 flex: grow shrink basis =    1  1 auto
      background-color: skyblue;
      min-height: 200px;
   }
</style>

三栏布局

两边固定,中间自适应

三栏布局.png

思路

  1. 左右给定宽高,使用绝对定位,中间只给高度,用margin隔离左右元素的宽度。
  2. HTML结构(左右中),左边给定宽高左浮动,右边给定宽高右浮动,中间只给高度,用margin隔离左右元素的宽度。

代码实现

<style>
  
    * {
        margin: 0;
        padding: 0;
    }
    body {
        min-width: 500px
    }

   .box {
      position: relative;
   }
   .left {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
      background-color: pink;
   }
   .right {
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
      height: 200px;
      background-color: pink;
   }
   .center {
      height: 200px;
      margin-left: 200px;
      margin-right: 200px;
      background-color: skyblue;
   }
</style>
<body>
    <div class="box">
       <div class="left">Left</div>
       <div class="right">Right</div>
       <div class="center">Center</div> //中间元素写在最后面
    </div>
</body>

圣杯布局

思路

  1. 给中左右类名 col 设置.col{float:left}

  2. .footer{clear:both} 清除footer浮动

  3. 留出左右宽度 #content { padding-left: 200px; padding-right: 200px; } 移动到center的左端 相对定位左移200px

  4. .left:{margin-left:-100%,position:relative,right:300px}

  5. .right:{margin-right:-200px} 左移200px

圣杯布局.png

代码实现

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        min-width: 500px
    }
    
    #header {
        background-color: #f1f1f1;
        height: 50px;
    }

    #content {
        height: 200px;
                        // 留出左右宽度 #content {  padding-left: 200px; padding-right: 200px; }
                        // 移动到center的左端            相对定位左移200px
        padding-left: 200px;
        padding-right: 200px;
    }

    #content .center {
        background-color: skyblue;
        height: 100%;
        width: 100%;
    }

    #content .left {
        position: relative;
        margin-left: -100%;

        width: 200px;
        height: 100%;            //.left:{margin-left:-100%,position:relative,right:300px}
        right: 200px;
        background-color: pink;
    }

    #content .right {

        margin-right: -200px;   //.right:{margin-right:-200px}  左移200px

        width: 200px;
        height: 100%;
        background-color: pink;
    }

    #content .col {
        float: left;                        //设置.col{float:left}
    }

    #footer {
        clear: both;   //  清除footer浮动
        height: 50px;
        background-color: #f1f1f1;
    }
</style>

<body>

    <div id="header">Header</div>
    <div id="content">
        <div class="center col">Center</div> // 1. 给中左右类名 col  
        <div class="left col">Left</div>     // 1. 给中左右类名 col  
        <div class="right col">Right</div>   // 1. 给中左右类名 col  
    </div>
    <div id="footer">Footer</div>

</body>

双飞翼布局

双飞翼布局.png

思路

圣杯布局为思路实现,但是center的内容被left和right覆盖了,除了要设置外围content的padding之外,

还可以考虑用margin把center拉过来; 在center中加一个内部元素center-top,设置其margin:0 200px;

代码实现

<style>
   * {
      margin: 0;
      padding: 0;
   }
   body {
      min-width: 500px
   }
   #header, #footer{
      height: 50px;
      width: 100%;

      background-color: #f1f1f1;
   }
   #left, #right{
      width: 200px;
      height: 200px;
      background-color:pink;
   }
   #center{
      background-color: skyblue;
      width: 100%;
      float: left;
   }
   #content{
      overflow: hidden;
   }
   #left{
      float: left;
      margin-left: -100%;
   }
   #right{
      float: left;
      margin-left: -200px;
   }
   .center-top{
      margin: 0 200px;
   }
</style>
<body>
    <div id="header">header</div>
    <div id="content">
       <div id="center">
          <div class="center-top">
             Center
          </div>
       </div>
       <div id="left">left</div>
       <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
</body>