rpx/px/rem 资源：详解

1rpx=0.5px=1物理像素

import 报错

import{AtButton} from ‘taro-ui’ 报错原因有两个
一个是import 定义有了 taro-ui ,定义重复，把 {}内的合并就可以了。
另一个是 没有使用，定义的 AtButton 必须使用才不会报错，所以使用的时候再去定义把。

编辑多行

选中多行内容，command/ctrl+shift+L 即可

居中：详解

文字居中 line-height

margin、padding 外内边距

margin：外边距；设置对象四边的外延边距。
margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
margin：20rpx：如果只提供一个，将用于全部的四边。
margin：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。
margin：20rpx 20rpx 10rpx：如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
某些相邻的margin会发生合并，称之为margin折叠，具体的现象就如果两个块级元素都设置了margin，那取两者之间的最大值做为两个元素的外边距。
注意：margin折叠常规认知：
margin折叠只发生在块级元素上；
浮动元素的margin不与任何margin发生折叠；
设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
绝对定位元素的margin不与任何margin发生折叠；
根元素的margin不与其它任何margin发生折叠.
padding：内边距：设置对象四边的内部边距。
padding: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
padding：20rpx：如果只提供一个，将用于全部的四边。
padding：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。
padding：20rpx 20rpx 10rpx：如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

注意：margin:auto 和 margin:0 auto 的区别
1、意思不同。margin:auto=margin:auto auto auto auto，表示上下左右都为auto；margin:0 auto=margin:0 auto 0 auto，表示上下为0，左右为auto；
2、居中方式不同。margin:auto表示横竖都居中，margin: 0 auto表示横居中，竖不居中；
margin后面一般会跟4个参数，如margin:1px、1px、1px、1px，分别表示上外边距为1px、右外边距为1px、下外边距为1px、左外边距为1px。
如果后面只写2个参数的话，如margin：1px、2px，则表示上下外边距为都为1px，左右外边距都为2px。

三.margin-top，margin-right，margin-bottom，margin-left对应的分别是上右下左外边的距离，可取值：auto／数值／百分比。
四.padding-top，padding-right，padding-bottom，padding-left对应的分别是上右下左内边的距离，可取值：auto／数值／百分比。
image.png
image.png

宽度留白：详解

圆角边框设置

border-radius:5%(百分比或者rpx)

box-shadow设置：详解

参数演示：一般是三个参数：水平位移、垂直位移、模糊半径(程度)、颜色

row、col 行列的border

行row 和 列 col 设置border

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

CSS border设置

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

代码包上限：详解

本地照片找空间很大，可以使用网络照片，这样几本书不会超上限。
但是网络照片dist是不会拷贝的。

圆角与mode(image)

过度想法：
mode参数大体分为两类：缩放的和不缩放。对于圆角设置：
不缩放的，即裁剪的，以及缩放中宽度不变的，都是上面两个角可以设置圆角，下面两个角不可以。
其余缩放的，都是不可以设置圆角，即便设置也是无效。
因为缩放其实显示的是其中的一部分，不会是原来的四个角，设置圆角是根据原来的进行设置的，因此是无效的。

阶段想法:
由于原来只设置了 height，很可能是高度超过了实际最大行高，所设置的内容没有完全显示出来。比如：设置widthFix 的时候，底部两个圆角已经设置成功,但由于设置了height，超出了实际最大行高，显示的只是一部分，看到的‘结果’是圆角设置不成功（其实只是看不到）。因此需要设置max-height来限制最大行高。注意：max-height是设置最大行高，如果超过实际最大行高，错误会和 height 一样，所以需要注意 rpx 的大小。
经过设置max-height 以后对image的大部分参数进行统一测试，发现除了 aspectFix,其他的都可以设置四个圆角
aspectFix 不能设置圆角
max/min-height与height区别：详解