被埋没的布局属性table和tabel-cell

学习iview这个ui框架的时候，很好奇下面这个组件是怎么实现的。

image.png

我们先来看一个简单的例子

<div style="display: table;width:100%;height: 700px;border: 1px solid #000;">
  <div style="width: 300px; float: left; height: 100px;background-color: red;margin-right: 10px;"></div>
  <div style="display: table-cell;width: 100%;">Loremibus, culpa ipsum sunt? Lorem ipsum dolor sit amet,
 consectetur adipisicing elit. Ratione temporibus recusandae deleniti, voluptatem magnam 
accusamus quod animi eum debitis dicta rem, minus quas quo, itaque error, amet tenetur earum. Est!</div>
</div>

image.png

当浏览器窗口缩放，文字区域也相应缩小，注意width: 100%;这里是减去300px和margin-right: 10px;后剩余的空间。

有木有想到表格的很多特性呢。
1.自动分配单元格的宽度
2.同一行的单元格等高。
3.单元格内容不定高时也能垂直居中

上述的几种方式都能够通过table和table-cell实现。

具体的例子课一看张鑫旭前辈的文章，这里不重复枚举了。
https://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/

目前已离职，求工作，好的移动端、和微信小程序学习资源，求推荐。