# 辅助布局

提示

使用辅助布局,更加高效率的构建页面布局,避免重复写样式,让代码更加简洁清晰。

# 内外边距尺寸

size xs sm md lg xl xxl
尺寸 8rpx 16rpx 24rpx 32rpx 40rpx 56rpx

# 示例:margin-xs

描述(外边距) class 描述(内边距) class
外边距 margin-{size} 内边距 padding-{size}
上外边距 margin-top-{size} 上内边距 padding-top-{size}
下外边距 margin-bottom-{size} 下内边距 padding-bottom-{size}
左外边距 margin-left-{size} 左内边距 padding-left-{size}
右外边距 margin-right-{size} 右内边距 padding-right-{size}
水平外边距 margin-lr-{size} 水平内边距 padding-lr-{size}
垂直外边距 margin-tb-{size} 垂直内边距 padding-tb-{size}
左右下外边距 margin-lrb-{size} 左右下内边距 padding-lrb-{size}
左右上外边距 margin-lrt-{size} 左右上内边距 padding-lrt-{size}

# 文字尺寸

size xs sm md lg xl xxl
尺寸 20rpx 24rpx 28rpx 32rpx 48rpx 64rpx

# 示例:text-xs

描述 class
文字尺寸 text-{size}

# 圆角尺寸

size xs sm md lg xl xxl
尺寸 8rpx 12rpx 16rpx 20rpx 100rpx 200rpx

# 示例:radius-xs

描述 class
全角 radius-{size}
左上角 radius-lt-{size}
左下角 radius-lb-{size}
右上角 radius-rt-{size}
右下角 radius-rb-{size}
上左右角 radius-lrt-{size}
下左右角 radius-lrb-{size}