流式布局之等比列缩放的盒子。

说到等比列布局，很多开发者便想到js，在响应式设计逐渐成为主流的今天，流式布局这个词即使放在一两年前也绝算不得是个新鲜词汇。下面是一个布局实例：

    <div class="item">here is somediv</div>
    <div class="item">here is somediv</div>
    <div class="item">here is somediv</div>
    <div class="item">here is somediv</div>
    <div class="item">here is somediv</div>
    <div class="item">here is somediv</div>
    <div class="item">here is somediv</div>
    <div class="item">here is somediv</div>
    <div class="item">here is somediv</div>
    <div class="item">here is somediv</div>

        *{
            padding: 0;
            margin: 0;
        }
        .item {
            float: left;
            width: 21%;
            margin: 10px 2%;
            height: 0;
            padding-bottom: 42%;
            background-color: #abcdef;
            overflow: hidden;
        }

注意，此处设置height为0主要是为了让padding-bottom撑开容器的高度。另外padding-left，padding－right ,padding-top,padding-bottom设置为百分百的时候，如果这个容器本身width是设置的百分百，则是相当于width进行设置。此处因为width的2倍。
如果元素本身width不是百分百，当padding的值是百分比形式时，百分比的基数是其所在元素的父元素的宽度而不是高度。

overflow：hidden也不会隐藏padding里面的文字，除非超出了padding的区域范围。