微信小程序笔记 前端 display的三种值：inline、block、inline-block

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;
}

前端效果图：