4:界面嵌套太多 - 《广于固志学习笔记》

开始阶段：查看界面框架，初始想法：共三部分，每一部分都是用图片铺满的。
过渡阶段：经过仔细审查，三部分是没错的，每一层都是设置多层，文字在最上层。于是设置了多个view来进行
多层嵌套，但是由于嵌套使用的过多，对于之间的关联并不是很清晰。
初步阶段：考虑以后，在row 行和列col 上设置了border，对 border进行CSS修饰，少了一层嵌套，逻辑清晰了很多。

<View className='at-row border'>
          <View className='at-col border'>
          <ScrollView class='scrollview' scrollX='true'>
          <Image className='lm' src='http://placekitten.com/600/600' mode='widthFix'></Image>
          <Image className='lm' src='http://placekitten.com/700/700' mode='widthFix'></Image>
          <Image className='lm' src='http://placekitten.com/900/900' mode='widthFix'></Image>
          </ScrollView></View>
        </View>

发现的问题：由于同时使用的是同一个border，在设置margin的时候可以统一设置为20rpx,但是同时写在一个里面会发生凹陷（设置失败），分开写是可以的。
个人想法：行和列同时使用同一个border，之间会发生干扰，而且设置border的时候本身就多了2px,在设置 margin，空间更小了，所以会出现凹陷

.border {
                box-shadow:0 6rpx 6rpx 6rpx lightgray;
        border-radius:5%;
        margin-left: 15rpx;
        margin-right: 15rpx;
        margin-bottom: 25rpx;}