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>圣杯布局</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      padding-left: 200px;
      padding-right: 150px;
    }
    .middle {
      width: 100%;
      height: 350px;
      background-color: palegreen;
      text-align: center;
      padding-top: 50px;
      float: left;
    }
    .left {
      width: 200px;
      height: 400px;
      background-color: green;
      margin-left: -100%;
      position: relative;
      right: 200px;
      text-align: center;
      line-height: 400px;
      float: left;
    }
    .right {
      width: 150px;
      height: 400px;
      text-align: center;
      line-height: 400px;
      background-color: pink;
      position: relative;
      margin-left: -150px;
      right: -150px;
      float: left;
    }
  </style>
  <body>
    <div class="container">
      <div class="middle">
        <h4>中间区域</h4>
        <p>
          圣杯布局要求header和footer各自占领屏幕所有宽度，高度固定 中间的container是一个三栏布局
          三栏布局两侧宽度固定不变，中间部分自动填充整个区域 中间部分的高度是三栏中最高的区域的高度
        </p>
      </div>
      <div class="left">左边栏</div>
      <div class="right">右边栏</div>
      <div style="clear: both"></div>
    </div>
    <script>
      let a = `三个模块浮动布局，清除浮动，按道理都会从左到右排，但是宽度不够，所以会换行，利用margin-三个模块浮动布局，清除浮动，按道理都会从左到右排，但是宽度不够，所以会换行，利用margin-left负值，向左偏移，然后利用相对定位，继续向左偏移达到指定位置；
                右侧也是负值，向左偏移，每偏移1%，相当于宽度减少1%，等宽度减为0，就不会换行，此时再利用相对定位进行右偏移。`;
    </script>
  </body>
</html>

 

posted @ 2022-04-25 20:40  苹果π  阅读(27)  评论(0)    收藏  举报