在开发小程序的时候，遇到一个这样的需求，页面使用栅格布局，显示很多小方块，这些小方块随着移动端宽高等比自适应，问题是栅格布局的元素宽度使用百分比，是不固定的，因此，看似不起眼的 padding 属性起到了至关重要的作用。

首先需要知道，一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，即使对于 padding-bottom 和 padding-top 也是如此。

另外，在计算 overflow 时，是将元素的内容区域（即 width / height 对应的区域）和 Padding 区域一起计算的。换句话说，即使将元素的 overflow 设置为 hidden，“溢出”到 padding 区域的内容也会照常显示。

简单的栅格布局代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<View className='wrap'>
  <View className='at-row at-row__justify--around select-box'>
    <View className='at-col at-col-3'>
      <View className='select-item'>
        <Text>项目一</Text>
      </View>
      <Text className='sub-title'>描述</Text>
    </View>
    <View className='at-col at-col-3'>
      <View className='select-item'>
        <Text>项目二</Text>
      </View>
      <Text className='sub-title'>描述</Text>
    </View>
    <View className='at-col at-col-3'>
      <View className='select-item'>
        <Text>项目三</Text>
      </View>
      <Text className='sub-title'>描述</Text>
    </View>
  </View>
</View>

padding属性设置为百分比，相对于宽度的百分比而言，从而实现宽高等比的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.search-character-box {
  width: 100%;
}
.select-box{
  color: #000;
  & .select-item{
    background-color: #5199ff;
    ::before{
      content: "";
      display: inline-block;
      padding-bottom: 100%; /*padding的百分比作用*/
      width: .1px;
      vertical-align: middle;
    }
  }
}