微信小程序max-width和width及min-width区别

1、打开开发者工具，在项目pages文件夹下，新建mypage文件夹，在文件夹内新建mypge页面，并在app.json配置文件将此页面设为第一页面。

2、在mypage.wxml中写代码如下

<view class='v1'>

<text>

ssss

</text>

</view>

<view class='v2'>

 nnn

</view>

在mypage.wxss中写代码如下：

.v1{

 min-height: 500rpx;

}

.v2{

}

3、保存代码，可以看到左边模拟器第一个view比第二个view高度高出很多，因为设置了最小高度

4、修改mypage.wxss文件，代码如下：

.v1{

 min-height: 500rpx;

 height: 800rpx;

}

.v2{

}

5、保存代码效果如下图，当定义了height，第一个view的高度是定义的height了

6、修改mypage.wxss代码如下，给第二个view定义最大高度

.v1{

 min-height: 500rpx;

 height: 800rpx;

}

.v2{

 max-height: 10rpx

}

7、保存代码，可以看到，第二个view只是一小条，里面的内容已经溢出来，如果同时设置了overflow:hidden就直接隐藏了