一、边框属性
1、padding 内边距，内容和边框之间的距离
padding 上、右、下、左四边内边距，默认值 0
padding-left、padding-right、padding-top、padding-bottom
2、border-style 设定边框样式 solid实线边框、dashed方形虚线边框、dotted圆点虚线边框
border-left-style、border-top-style、border-right-style、border-bottom-style
3、border-width：设定边框宽度
border-width 、border-left-width、border-top-width、border-right-width、border-bottom-width
4、border-color：设定边框颜色
border-color、border-left-color、border-top-color 、border-right-color、border-bottom-color
5、border-radius：设置边框的圆角
border-radius、border-bottom-left-radius、border-bottom-right-radius、border-top-left-radius、border-top-right-radius
6、margin ：外边距
margin、margin-left、margin-right、margin-top、margin-bottom
二、 Flex 容器
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
在 nvue中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性。
1、flex-direction 定义了 flex 容器中 flex 成员项的排列方向，默认值为 column
column：竖排，从上到下排列
column-reverse：反向竖排，排布方向与flex-direction:column相反
row：横排，从左到右排布
row-reverse：反向横排，排布方向与flex-direction:row相反
2、flex-wrap决定了 flex 成员项在一行还是多行分布，默认值为nowrap
nowrap不换行，flex 成员项在一行排布，排布的开始位置由direction指定
wrap换行，第一行在上方，flex 成员项在多行排布，排布的开始位置由direction指定
wrap-reverse换行，第一行在下方，行为类似于wrap，排布方向与其相反
3、justify-content定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。默认值为 flex-start
flex-start：左对齐，所有的 flex 成员项都排列在容器的前部
flex-end：右对齐，则意味着成员项排列在容器的后部
center：居中，即中间对齐，成员项排列在容器中间、两边留白
space-between：两端对齐，空白均匀地填充到 flex 成员项之间
space-around：表示 flex 成员项两侧的间隔相等，所以，成员项之间的间隔比成员项与边框的间隔大一倍
4、align-items定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。默认值为 stretch。
stretch：即拉伸高度至 flex 容器的大小
flex-start：上对齐，所有的成员项排列在容器顶部
flex-end：下对齐，所有的成员项排列在容器底部
center：中间对齐，所有成员项都垂直地居中显示
5、flex ：flex 成员项可以占用容器中剩余空间的大小。 flex {number}：值为 number 类型。
例：
/* 占剩余空间长度 */
flex: 1;
white-space: nowrap;/* text单行显示 */
overflow: hidden;/* text溢出隐藏 */
text-overflow: ellipsis;/* text溢出显示省略号 */
<view class="username">
<image class="phone_img" src="../../static/bg_login_mobile_left.png"></image>
<text class="phone">请输入手机号码请输入手机号码请输入手机号码请输入手机号码</text>
<image class="phone_img" src="../../static/bg_login_mobile_left.png"></image>
</view>
.username {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 60rpx;
margin-right: 60rpx;
}
.phone_img {
width: 40rpx;
height: 40rpx;
}
.phone {
margin-left: 20rpx;
/* 占剩余空间长度 */
flex: 1;
/* 单行显示，需一起使用 */
white-space: nowrap;/* 单行显示 */
overflow: hidden;/* 溢出隐藏 */
text-overflow: ellipsis;/* 溢出显示省略号 */
/* 单行显示，需一起使用 */
}
6、position 定位：设置定位类型。默认值为 relative。
relative：是默认值，指的是相对定位
absolute：绝对定位，以元素的容器作为参考系
fixed：固定定位，保证元素在页面窗口中的对应位置显示，即使窗口是滚动的它也不会移动
sticky：指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部，达到吸顶效果/粘性定位（布局）
