CSS布局之流式布局和圣杯布局

流式布局

​ 流式布局，也可说是百分比布局，常用于移动端布局，通过设置视口宽度 width：100%；让容器内部左右拉满，根据不同的屏幕宽度进行适配。效果如图：

• 实现前需要在标签中添加meta标签
  

• 具体代码实现：

<!-- css代码 -->
<style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .bigBox{
      padding:0 200px;
      position: relative;
    }
    .boxLeft{
      position:absolute;
      width: 200px;
      height: 200px;
      left: 0;
      top: 0;
      border: 2px solid red;
    }
    .boxCenter{
      width: 100%;
    }
    .boxRight{
      position:absolute;
      width: 200px;
      height: 200px;
      right: 0;
      top: 0;
      border: 2px solid red;
    }


  </style>
<!-- html代码 -->
<!-- 流式布局 -->
<div class="bigBox">
  <div class="boxLeft"></div>
  <div class="boxCenter">
    流式布局（streaming）
    元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下不能正常显示
    使用百分比定义宽高大多数都是用px来固定住，可以根据可视区域（viewport）和父元素的尺寸进行调整，尽可能的适应各种分辨率，往往max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读页面。这种布局方式在WEB前端开发的时早期历史上，用来应对不同尺寸的pc屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果长度过大，那么在相对其原始设计而言过小或过大的屏幕都不能在屏幕上正常的显示。
    因为宽度使用百分比（%）来定义，但是高度和文字大小等大都是用px来固定。所以在大屏幕的手机下显示效果变成有些页面元素宽度被拉的很长，但是高度，文字大小文字还是和原来一样，享受到非常的不协调
    缺点：如果尺度过大或者过小在屏幕上就不能正常显示
    优点：兼容性比较好，当屏幕分辨率变化时元素大小不变布局也不变
  </div>
  <div class="boxRight"></div>
</div>

圣杯布局

实现思路：

• 首先我有三个盒子center、left、right，分别设置一些基本样式，然后 float:left使三个盒子并列一排显示，但是由于我给center设置了宽度100%，那么 left 和 right 会被挤下第二排。如图：

• 那么如何让 left盒子 显示在center盒子的左侧呢？

  由于三个盒子都给了浮动，说明三个盒子已经脱离文档流，而第一个center盒子的宽度是100%，那么我们可以给left盒子设置 margin-left: -100%，因为left盒子的margin-left是相对于父盒子box而言。如图：

  

• 那么又如何让 right盒子 显示在center盒子的右侧呢？

由于他们三都是浮动脱离了文档流，所以给right盒子设置margin-left：负right盒子的宽度即可，这样正好可以是center盒子重叠了right盒子的宽度。如图：

• 这样效果就出来了，但是需要注意一个细节，当我们把左右盒子的颜色去掉之后，发现它挡住了center的内容。如图：

• 处理方法：可以通过给center盒子添加padding使左右盒子让出自身盒子的宽度即可。如图：

• 具体代码如下：

 <style>
    /* css代码 */
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    } 
    .center {
      width: 100%;
      height: 200px;
      background-color: greenyellow;
      padding: 0 200px;
      float: left;
      clear: both;
    }
    .left{
      width: 200px;
      height: 200px;
      /* background-color: pink; */
      border: 1px solid red;
      float: left;
      margin-left: -100%;
    }
    .right{
      width: 200px;
      height: 200px;
      /* background-color: purple; */
      border: 1px solid red;
      float: left;
      margin-left:-200px;
    }
    .txt{
      color: royalblue;
      font-size: 24px;
      font-weight: 600;
      text-align: center;
      line-height: 200px;
    }

  </style>

  <!-- 圣杯布局 -->
  <div class="box">
    <div class="center txt">main main main main main main main </div>
    <div class="left txt">left</div>
    <div class="right txt">right</div>
  </div>