前端布局之table布局

前言

flex布局看这里
grid布局看这里

table布局

基本语法

table == { display: table; }
tr == { display: table-row; }
td, th == { display: table-cell; }

就了解这三个就够了,后面的CSS的代码就可以把元素拥有双等号前面元素的特征

优点

除了兼容性，就没有优点了

缺点

<table>什么缺点，它就什么缺点

应用场景

动态垂直居中

这个使用的关键是vertical-align: center,但是这个属性设置给普通元素大多数情况是不能实现所要的效果，但是table例外，它可以完美将其内部元素垂直居中

.container {
  display: table;
}
.content {
  display: table-cell;
  vertical-align: center;
}

还有另外一种玩法，这个方法兼容性可以更低

/* HTML */
<div>
  <i></i>
  <span></span>
</div>

div是包裹元素，主体内容是span，span的高度未知，为了实现垂直居中，在div里面加了一个标签i

div > * {
  display: inline-block;
  vertical-align: center;
}
i {
  height: 100%;
  width： 0;
}

这里定义了元素i的高度是100%，所以它与span的对齐线其实就是div的垂直中线 此外，还有一种CSS3的玩法

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

自然,flex和grid布局搞个小小的垂直居中就不在话下了

动态水平居中

水平居中的话父元素设置个text-aling: center就可以了，但是这个属性会继承到所有子元素里，同时子元素必须是inline/inline-block，如果用table的话就特别简单

.content {
  display: table;
  margin: 0 auto;
}

这就体现出table的优势，想用它的特征，直接引用就行，还不需要去添加tr,td之类的

响应式布局

/* 三列布局 */
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

/* CSS */
.container {
  display: table;
  width: 100%;
}
.box {
  display: table-cell;
}

简简单单几个属性就实现了响应式布局，如果想要固定一列宽度，其他两列自适应，只需要设置固定列的宽度即可，此外对于手机屏幕还得加个媒体查询

@media (max-width: 420px) {
    .box {
        display: block;
        width: 100%;
    }
}

动态高度的页脚贴在页面底部

当网站有个页脚的时候，一般的要求是内容超出屏幕的时候，页脚就跟在内容的后面，但内容不够一个屏幕的时候，页脚就得乖乖的呆在底部。一般这个实现要用到JS，用table就非常轻松

/* HTML */
<div class="container">
  <div class="main">这里是主体内容</div>
  <div class="footer">这里是页脚</div>
</div>

/* CSS */
* {
    padding: 0;
    margin: 0;
  }
  /* 设置html标签的高度非常重要 */
  html, body {
    height: 100%;
  }
  .container {
    display: table;
    width: 100%;
    height: 100%;
  }
  .footer {
    display: table-row;
    height: 1px;
  }

页脚的高度设置为1px实现了页脚的动态高度，当然也可以固定高度 实现原理其实也很简单，转变为HTML Table就是下面的结构

<table>
  <tr></tr>
  <tr>
    <td>页脚内容</td>
  </tr>
</table>

table的高度为100%，所以两个tr就动态平分了，设置最后一个tr高度为1时，剩下的tr高度自动就变成99%了

当页脚高度固定的时候，还有另外一种玩法，使用margin-bottom实现

/* HTML */
<div class="main"></div>
<div class="footer"></div>
/* CSS */
.main {
  min-height: 100%;
  width: 100%;
  margin-bottom: -100px;
}
.footer {
  height: 100px;
  background-color: #0086B3;
}

圣杯布局

网页中常见的经典布局，有头部有底部，中间位置分为三列，其实实现就是把上面两个布局合并一下

    /* HTML */
    <div class="container">
      <div class="header">头部</div>
      <div class="main">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
      </div>
      <div class="footer">底部</div>
    </div>

    /* CSS */
    .container {
      display: table;
      height: 100%;
      width: 100%;
    }
    .header {
      height: 1px;
      display: table-row;
      background-color: orange;
    }
    .main {
      display: table;
      width: 100%;
    }
    .box {
      display: table-cell;
    }
    .footer {
      height: 1px;
      display: table-row;
      background-color: #0086B3;
    }

需要注意的一点是：主体内容main必须设置为table，不能设置为table-row，如果把main变成一个tr，那么头部和底部的布局就会收到影响。

结束

table布局虽好，切不要贪多...