display有三种值:inline、block、inline-block
有篇文章是这么说的:
简单来说,就是:
inline:宽度、高度、边距不可控制(宽度、高度就是文本的宽度、高度);不独占一行
block:宽度、高度、边距可控制;独占一行
inline-block:宽度、高度、边距可控制;不独占一行
给下面三个小示例:
wxml:
<view class="bigBox">
<view class="smallBox">test</view>
<view class="smallBox">test</view>
</view>
1. block(view默认是block):
wxss:
.bigBox{
margin: 10rpx;
}
.smallBox{
background-color: red;
margin: 10rpx;
width: 100rpx;
height: 100rpx;
/* view默认是block */
display: block;
}
前端效果图:
2. inline:
wxss:
.bigBox{
margin: 10rpx;
}
.smallBox{
background-color: red;
margin: 10rpx;
width: 100rpx;
height: 100rpx;
display: inline;
}
前端效果图:
3. inline-block:
wxss:
.bigBox{
margin: 10rpx;
}
.smallBox{
background-color: red;
margin: 10rpx;
width: 100rpx;
height: 100rpx;
display: inline-block;
}
前端效果图: