【CSS】CSS布局：两栏布局、三栏布局、水平垂直居中

CSS定位布局方法：

• float布局：优点： 比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的；缺点：浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。
• absolute布局：优点：很快捷，设置很方便，而且也不容易出问题；缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。
• flex布局：优点：简单快捷；缺点：不支持 IE8 及以下
• table布局：优点：实现简单，代码少；缺点：当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。
• grid布局：优点：简单快捷；缺点：不支持 IE8 及以下

一、 两栏布局

两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。以左边宽度固定为 200px 为例：

• （1）利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。
• （2）第二种是利用 flex 布局，将左边元素的放大和缩小比例设置为 0，基础大小设置为 200px。将右边的元素的放大比例设置为 1，缩小比例设置为 1，基础大小设置为 auto。
• （3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。
• （4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。

具体实现：

/*两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。*//*以左边宽度固定为200px为例*/
/*（1）利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。*/
.outer {  height: 100px;}
.left { float: left; height: 100px; width: 200px; background: tomato;}
.right { margin-left: 200px; width: auto; height: 100px; background: gold;}

/*（2）第二种是利用flex布局，将左边元素的放大和缩小比例设置为0，基础大小设置为200px。将右边的元素的放大比例设置为1，缩小比例设置为1，基础大小设置为auto。*/
.outer { display: flex; height: 100px;}
.left { flex-shrink: 0; flex-grow: 0; flex-basis: 200px; background: tomato;}
.right { flex: auto; /*11 auto*/ background: gold;}

/*（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。*/
.outer { position: relative; height: 100px;}
.left { position: absolute; width: 200px; height: 100px; background: tomato;}
.right { margin-left: 200px; height: 100px; background: gold;}

/*（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。*/
.outer { position: relative; height: 100px;}
.left { width: 200px; height: 100px; background: tomato;}
.right { position: absolute; top: 0; right: 0; bottom: 0; left: 200px; background: gold;}

二、三栏布局

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。这里以左边宽度固定为100px，右边宽度固定为200px为例：

1. 利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。
2. 利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto。
3. 利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。
4. 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的pedding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。双飞翼布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。
5. 双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的pedding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

具体实现：

/*三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。
这里以左边宽度固定为100px，右边宽度固定为200px为例。*/

/*（1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。*/
.outer { position: relative; height: 100px;}
.left { position: absolute; width: 100px; height: 100px; background: tomato; }
.right { position: absolute; top: 0; right: 0; width: 200px; height: 100px; background: gold; }
.center { margin-left: 100px; margin-right: 200px; height: 100px; background: lightgreen; }

/*（2）利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto*/
.outer {  display: flex;  height: 100px;}
.left {  flex: 0 0 100px;  background: tomato;}
.right {  flex: 0 0 200px;  background: gold;}
.center {  flex: auto;  background: lightgreen;}

/*（3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。*/
.outer {  height: 100px;}
.left {  float: left;  width: 100px;  height: 100px;  background: tomato;}
.right {  float: right;  width: 200px;  height: 100px;  background: gold;}
.center {  height: 100px;  margin-left: 100px;  margin-right: 200px;  background: lightgreen;}

/*（4）双飞翼布局，利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。*/
.outer {  height: 100px;  padding-left: 100px;  padding-right: 200px;}
.left {  position: relative;  left: -100px;  float: left;  margin-left: -100%;
  width: 100px;  height: 100px;  background: tomato;}
.right {  position: relative;  left: 200px; float: right;  margin-left: -200px;
  width: 200px;  height: 100px;  background: gold;}
.center {  float: left; width: 100%;  height: 100px;  background: lightgreen;}

/*（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的pedding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。*/
.outer { height: 100px;}
.left { float: left; margin-left: -100%; width: 100px; height: 100px; background: tomato;}
.right { float: left; margin-left: -200px; width: 200px; height: 100px; background: gold;}
.wrapper { float: left; width: 100%; height: 100px; background: lightgreen;}
.center { margin-left: 100px; margin-right: 200px; height: 100px;}

三、水平垂直居中

水平垂直居中的方法：

• absolute + 负margin：好理解，兼容性也好，缺点需要知道子元素的宽高
• absolute + auto margin：兼容性好，缺点是需要知道子元素的宽高
• absolute + calc：兼容性依赖于 calc，且也需要知道宽高
• absolute + transform：兼容性依赖 translate，不需要知道子元素宽高
• table： css新增的table属性，可以让我们把普通元素，变为table元素的显示效果，通过这个特性也可以实现水平垂直居中。这种方法兼容性也不错。
• flex：实现起来比较简单，三行代码即可搞定。可通过父元素指定子元素的对齐方式，也可通过子元素自己指定自己的对齐方式来实现。
• grid：grid 布局也很强大，大体上属性跟 flex 差不多。

具体实现：

1. absolute + 负margin：好理解，兼容性也好，缺点需要知道子元素的宽高

<div class="out">
  <div class="inner">absolute + 负margin</div>
</div>

<style type="text/css">
  .out{
    position: relative;
    width: 300px;
    height: 300px;
    background: red;
  }

  .inner{
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
  }
</style>

2. absolute + auto margin：兼容性好，缺点是需要知道子元素的宽高

<div class="out">
  <div class="inner">absolute + auto margin</div>
</div>
<style type="text/css">
  .out{
    position: relative;
    width: 300px;
    height: 300px;
    background: red;
  }

  .inner{
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
</style>

3. absolute + calc：兼容性依赖于 calc，且也需要知道宽高

<div class="out">
  <div class="inner">absolute + calc</div>
</div>
<style type="text/css">
  .out{ position: relative; width: 300px; height: 300px; background: red; }
  .inner{ position: absolute; width: 100px; height: 100px; background: yellow; left: calc(50% - 50px); top: calc(50% - 50px); }
</style>

4. absolute + transform：兼容性依赖 translate，不需要知道子元素宽高

<div class="out">
  <div class="inner">absolute + transform</div>
</div>
<style type="text/css">
  .out{ position: relative; width: 300px; height: 300px; background: red; }
  .inner{ position: absolute; background: yellow; left: 50%; top: 50%; transform: translate(-50%, -50%); }
</style>

5. table：css新增的table属性，可以让我们把普通元素，变为table元素的显示效果，通过这个特性也可以实现水平垂直居中。这种方法兼容性也不错。

<div class="out">
  <div class="inner">table</div>
</div>
<style type="text/css">
  .out{
    display: table-cell;
    width: 300px;
    height: 300px;
    text-align: center;
    vertical-align: middle;
    background: red;
  }

  .inner{
    display: inline-block;
    background: yellow;
    width: 100px;
    height: 100px;
  }
</style>

6. flex：实现起来比较简单，三行代码即可搞定。可通过父元素指定子元素的对齐方式，也可通过子元素自己指定自己的对齐方式来实现。第二种方式见 grid 布局。

<div class="out">
  <div class="inner">flex</div>
</div>
<style type="text/css">
  .out{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    background: red;
  }

  .inner{
    background: yellow;
    width: 100px;
    height: 100px;
  }
</style>

7. grid：grid 布局也很强大，大体上属性跟 flex 差不多。

<div class="out">
  <div class="inner">grid</div>
</div>
//方法一：父元素指定子元素的对齐方式
<style type="text/css">
  .out{
    display: grid;
    align-content: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    background: red;
  }

  .inner{
    background: yellow;
    width: 100px;
    height: 100px;
  }
</style>

//方法二：子元素自己指定自己的对齐方式
<style type="text/css">
  .out{
    display: grid;
    width: 300px;
    height: 300px;
    background: red;
  }
  .inner{
    background: yellow;
    width: 100px;
    height: 100px;
    align-self: center;
    justify-self: center;
  }
</style>