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

说到等比列布局，很多开发者便想到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的区域范围。