布局基本知识
-
margin & padding
- 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*/- 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 rpx单位介绍
rpx：微信把每个手机屏幕的宽度设置为750
比如 iPhone 6 屏幕的物理像素为375pt = 375px = 750rpx 即1pt = 1px = 2rpxborder
border-style： solid //边框样式 实线
border-color: red //边框颜色
border-width：50rpx 边框宽度
border ： solid red 50rpx；顺序不能变
