微信小程序组件的定位

一、相对定位绝对定位

相对定位:相对自身定位

{
position: relative;
top: 50rpx;
left:50rpx
}

绝对定位:相对离它最近的一个已定位的父级元素定位

{
  position: absolute;
  top: 50rpx;
  left:50rpx
}

二、margin和padding

 margin用来隔开容器与容器间的间距

 padding用来隔开内容与容器边框的间距

marg/padding-left(right、bottom、top)

三、杂七杂八

1.背景渐变色

{
  background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.4),rgba(0,0,0,1));
}

2.字体大小

{
  font-size: 15px;
}

3.获取json的多个数据

 data: {
    contentItems: [{ 'item1': '/pages/images/timg (3).jpg', 'name': '11111' }, 
                   { 'item1': '/pages/images/timg (4).jpg', 'name': '22222' }, 
                   { 'item1': '/pages/images/timg (5).jpg', 'name': '33333' }, 
                   { 'item1': '/pages/images/timg (6).jpg', 'name': '44444' }],
        }
<view class='content'>
      <view class='content-item' wx:for='{{contentItems}}'>
         <image src='{{item.item1}}'></image>
         <view class='content-item-text'>
            <text>{{item.name}}</text>
         </view>
       </view>
</view>

猜你喜欢

转载自blog.csdn.net/qq_41518266/article/details/84348584