面试题系列 —— 6 两栏布局、圣杯布局、双飞翼布局

最新推荐文章于 2023-02-20 10:55:56 发布

yang.ing

最新推荐文章于 2023-02-20 10:55:56 发布

阅读量186

点赞数

分类专栏：前端面试知识点文章标签： css html

本文链接：https://blog.csdn.net/qq_46030564/article/details/124576430

版权

前端面试知识点专栏收录该内容

10 篇文章 0 订阅

订阅专栏

面试题系列 —— 6 两栏布局、圣杯布局、双飞翼布局

两栏布局：即左侧固定 + 右侧自适应布局

<!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>Document</title>
</head>
<style>
  /*
     
  利用浮动实现----float                    -------- 1
    利用浮动，左边元素宽度固定，设置向左浮动。将右边的 margin-left 设为固定宽度。
    注意，因为右边元素的 width 默认为 auto ，所以会自动撑满父元素。
    
  .outer{
    height: 100px;
  }
  .left{
    float: left;
    width: 200px;
    height: 100%;
    background-color: blue;
  }
  .right{
    margin-left: 200px;
    height: 100%;
    background-color: green;
  }
*/


  /* 
    
    利用绝对定位-----absolute 左侧             ----- 2
    	利用绝对定位，父元素设为相对定位。左边元素 absolute 定位，宽度固定。右边元素的 margin-left 的值设为左边元素的宽度值
    
  .outer {
    position: relative;
    height: 100px;
  }

  .left {
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: aqua;
  }

  .right {
    width: auto;
    height: 100%;
    margin-left: 200px;
    background-color: blueviolet;
  }
*/


  /* 
    
    利用绝对定位-------absolute 右侧          ----- 3
   		利用绝对定位，父级元素设为相对定位。左边元素宽度固定，右边元素 absolute 定位，left 为宽度大小，其余方向为0.
    
  .outer {
    position: relative;
    height: 100px;
  }

  .left {
    height: 100px;
    width: 200px;
    background-color: aqua;
  }

  .right {
    position: absolute;
    height: 100%;
    left: 200px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: blue;
  }
*/


  /* 利用flex布局，右边设置flex: 1             ------- 4  
  
    利用 flex 布局，左边元素固定宽度，右边的元素设置 flex：1
  */
    
  .outer {
    display: flex;
    height: 100px;
  }

  .left {
    width: 200px;
    height: 100%;
    background-color: aqua;
  }

  .right {
    flex: 1;
    height: 100%;
    background-color: yellow;
  }
</style>

<body>
  <div class="outer">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
</body>

</html>

圣杯布局：

圣杯布局和双飞翼布局的目的：
- 三栏布局，中间一栏最先加载和渲染（内容最重要，这就是为什么还需要了解这种布局的原因）。
- 两侧内容固定，中间内容随着宽度自适应。
- 一般用于 PC 网页。
圣杯布局和双飞翼布局的技术总结：
- 使用 float 布局。
- 两侧使用 margin 负值，以便和中间内容横向重叠。
- 防止中间内容被两侧覆盖，圣杯布局用 padding ，双飞翼布局用 margin 。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>
<style>
  body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
  }
  #header, #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #container {
   display: flex;
  }
  #container .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #center {
    flex: 1;
    background: rgb(206, 201, 201);
  }
  #left {
    width: 200px;
    background: rgba(95, 179, 235, 0.972);
  }
  #right {
    width: 150px;
    background: rgb(231, 105, 2);
  }
</style>

<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="left" class="column">#left</div>
    <div id="center" class="column">#center</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
</body>

</html>

双飞翼布局：

<!DOCTYPE html>
<html>
<!--   圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。
     主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样。
     圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，
     通过左移和右移来使得左右两边的内容得以很好的展现，
     而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。 -->
<head>
  <meta charset="utf-8">
</head>
<style>
  body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
  }

  #header,
  #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }

  #container {
    overflow: hidden;
  }

  .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }

  #left,
  #right,
  #center {
    float: left;
  }

  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }

  #left {
    width: 200px;
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }

  #right {
    width: 150px;
    margin-left: -150px;
    background: rgb(231, 105, 2);
  }

  .content {
    margin: 0 150px 0 200px;
  }
</style>

<body>
  <div id="header">#header</div>

  <div id="container">
    <div id="center" class="column">
      <div class="content">#center</div>
    </div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>

  <div id="footer">#footer</div>
</body>

</html>