css table 固定列_CSS（1）- 布局

CSS 布局

1. 左右布局（两列自适应）
2. 左中右布局（三栏布局）
3. 水平居中
4. 垂直居中
5. 等高布局
6. 粘连布局

1 - 左右布局（两列自适应）

一列由内容撑开，另一列撑满剩余宽度

1.1 float + overflow:hidden

如果是普通的布局，浮动 + 元素 margin 就可以实现，但是如果是自适应撑满的两列布局，用 float + overflow:hidden 可以实现。

此方法通过 overflow 触发 BFC，而 BFC 不会重叠浮动元素。由于设置 overflow: hidden 并不会触发 IE-6 的 haslayout 属性，所以需要设置 zoom: 1 来兼容 IE-6。代码：

  <div class="parent" style="background-color: lightgrey;">
      <div class="left" style="background-color: lightblue;">
          <p>left</p>
      </div>
      <div class="right"  style="background-color: lightgreen;">
          <p>right</p>
          <p>right</p>
      </div>        
  </div>
  .parent {
    overflow: hidden;
    zoom: 1;
  }
  .left {
    float: left;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
    zoom: 1;
  }

注意：如果侧边栏在右边，注意渲染顺序。

1.2 Flex 布局

弹性布局，很简单就能实现：

  .parent {
    
    display:flex;
  }  
  .right {
    
    margin-left:20px; 
    flex:1;
  }

1.3 Grid 布局

Grid 二维布局系统

  .parent {
    
    display:grid;
    grid-template-columns:auto 1fr;
    grid-gap:20px
  } 

2 - 三栏布局（圣杯/双飞翼）

利用 Flex 和 Grid 可以迅速进行三栏布局，和上面两列布局类似
这里我们重点讨论一下 中间自适应，两侧固定的圣杯布局和双飞翼布局

2.1 圣杯布局

介绍

比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是 DOM 结构必须是先写中间的部分以确保中间列可以优先加载。

    <article class="container">
      <div class="center">
        <h2>圣杯布局</h2>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </article>
    .container {
      padding-left: 220px;//为左右栏腾出空间
      padding-right: 220px;
    }
    .left {
      float: left;
      width: 200px;
      height: 400px;
      background: red;
      margin-left: -100%;
      position: relative;
      left: -220px;
    }
    .center {
      float: left;
      width: 100%;
      height: 500px;
      background: yellow;
    }
    .right {
      float: left;
      width: 200px;
      height: 400px;
      background: blue;
      margin-left: -200px;
      position: relative;
      right: -220px;
    }

原理

1. 三列都设置为左浮动，使得三列保持在一行
2. 设置中间列宽度为 100% （自适应的关键），这时候左右会自动流动到下一行
3. 设置 margin-left 为负值，使得左右两列回到中间列一行
4. 设置大容器的 padding，为左右两列留出空间
5. 通过 position: relative 调整左右两列

缺陷

• center 的 min-width 不能小于 left 的 width
• 三列中任何一列高度边长，其他两列不会自动填充

2.2 双飞翼布局

介绍

优化了圣杯布局，解决圣杯布局错乱问题，实现内容与布局分离，而且没有高度适应问题

      <article class="container">
          <div class="center">
              <div class="inner">双飞翼布局</div>
          </div>
          <div class="left"></div>
          <div class="right"></div>
      </article>
      .container {
          min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
      }
      .left {
          float: left;
          width: 200px;
          height: 400px;
          background: red;
          margin-left: -100%;
      }
      .center {
          float: left;
          width: 100%;
          height: 500px;
          background: yellow;
      }
      .center .inner {
          margin: 0 200px; //新增部分
      }
      .right {
          float: left;
          width: 200px;
          height: 400px;
          background: blue;
          margin-left: -200px;
      }

原理

1. 三列都设置为左浮动，使得三列保持在一行
2. 设置中间列宽度为 100% （自适应的关键），这时候左右会自动流动到下一行
3. 设置 margin-left 为负值，使得左右两列回到中间列一行
4. 在 center 新增 inner 子容器，样式 margin: 0 200px；