下载掌阅APP，畅读海量书库
立即打开
设计两个元素，靠右侧显示，如图2-8所示。
1）背景view样式为box，在屏幕水平居中。
2）box内的view样式为sbox，通过样式控制sbox显示在box右侧。
3）按效果图合理设置背景色、区域大小、文本字体大小。
1 打开index.wxml，添加＜view class="box"＞、＜view class="subbox"＞、＜view class="view1"＞、＜view class="view2"＞等组件。
要使一个组件靠右对齐，有许多方法。如果能熟练地运用不同的代码实现同样的预期效果，则需要开发者对每句代码的功能都理解。平时多上网查阅语句的功能说明，这样会帮助自己提高代码的理解水平。
2 打开index.wxss，添加.box、.subbox、.view1、.view2等样式，实现视图效果，如图2-8所示。
图2-8 元素靠右侧显示
margin属性在一个声明中可设置所有外边距属性。
例：
margin:10rpx 15rpx 25rpx 30rpx；
上外边距是10rpx。
右外边距是15rpx。
下外边距是25rpx。
左外边距是30rpx。
例：
margin:10rpx 15rpx；
上外边距和下外边距是10rpx。
右外边距和左外边距是15rpx。
例：
margin:0 auto；
实际可以写成“margin:0 auto 0 auto;”，设置对象的上、下外边距为0，左、右自动。左、右自动，即到达了居中的效果。
如果只需要设置某一个方向的margin值，则可以使用margin-left、margin-top、margin-right、margin-bottom。