今天完成的事：解决了大部分task13.剩下最后一点。

明天计划完成的事：完成task13，开始task14.

遇到的困难：暂无。

收获：这次设置div的时候，感觉怎么设置怎么之前流畅，设置了下等比例缩放后发现正常多了。

下面是一个布局实例：

上图中每个蓝色的矩形分别对应一个 div 元素，每个元素的宽度占窗口宽度的四分之一（图示中为了演示方便给每个元素加了边距效果）。如果不做额外处理，当窗口宽度变小时上图的页面会变为如下所示：

可见每个元素的宽度进行了缩放，但高度并没有变化，看起来并不是很协调。所以有些场景下我们需要实现当窗口宽度缩放时，使得元素宽度自适应的同时，保证宽高的比例不变。

这时候用padding-bottom能做到JS的效果。

padding-bottom 有一个让人很容易忽略的特性是当它的值是百分比形式时，百分比的基数是其所在元素的父元素的宽度而不是高度（同 padding-left 和 padding-right 一样）。这样解决方案也就非常明显了：

1. 将元素的 height 设成 0，使得元素的高度等于 padding-bottom；
2. 合理设置 padding-bottom 的值。比如每个元素的 width 是 25%，现在想让元素的高度始终保持为其宽度的两倍，则 padding-bottom 的值应该设置为 50%。

结果如下图所示：

既然 height 被设成了 0，那么如果元素的 overflow 为 hidden，里面的文字是否会因为超出了元素高度而被隐藏？其实并不会。根据 CSS 2.1 规范2，overflow 只会对处于 padding edge 外面的内容生效，即只有超出了 padding 区域的内容才会被 overflow 属性隐藏掉。