4.小程序margin、padding、border的使用

布局基本知识

1. margin & padding

   1. margin 当前控件相对于父控件的间距

   margin: 50rpx; /*上: 50rpx 右: 50rpx 下: 50rpx 左: 50rpx*/
   margin: 50rpx 30rpx; /*上: 50rpx 右: 30rpx 下: 50rpx 左: 30rpx*/
   margin: 50rpx 30rpx 20rpx; /*上: 50rpx 右: 30rpx下: 20rpx 左: 30rpx*/
   margin: 50rpx 30rpx 20rpx 60rpx; /*上: 50rpx 右: 30rpx 下: 20rpx 左: 60rpx*/
   

   2. padding 当前容器控件相对于子控件的间距

    padding: 50rpx; /*上: 50rpx 右: 50rpx 下: 50rpx 左: 50rpx*/
    padding: 50rpx 30rpx; /*上: 50rpx 右: 30rpx 下: 50rpx 左: 30rpx*/
    padding: 50rpx 30rpx 20rpx; /*上: 50rpx 右: 30rpx下: 20rpx 左: 30rpx*/
    padding: 50rpx 30rpx 20rpx 60rpx; /*上: 50rpx 右: 30rpx 下: 20rpx 左: 60rpx*/
   

   布局如下图所示

   
   小程序基础布局.png

2. rpx单位介绍
   rpx：微信把每个手机屏幕的宽度设置为750
   比如 iPhone 6 屏幕的物理像素为375pt = 375px = 750rpx 即1pt = 1px = 2rpx

3. border
   border-style： solid //边框样式 实线
   border-color: red //边框颜色
   border-width：50rpx 边框宽度
   border ： solid red 50rpx；顺序不能变