微信小程序样式box-sizing用法

 时间:2026-02-12 23:04:31

1、打开开发者工具,在项目的pages文件夹下新建mypage文件夹,在文件夹内新建page,名为mypage,并在app.json中将mypage设为第一页面。

微信小程序样式box-sizing用法

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

<view>

 content

</view>

微信小程序样式box-sizing用法

3、在mypage.wxss样式文件,添加代码如下;

view{

 width: 200rpx;

 height: 200rpx;

 margin: 10rpx;

 padding: 20rpx;

}

微信小程序样式box-sizing用法

4、保存代码,在模拟器查看效果,这是典型的盒模型的样子

微信小程序样式box-sizing用法

5、改写mypage.wxss代码如下:

view{

 width: 200rpx;

 height: 200rpx;

 margin: 10rpx;

 padding: 20rpx;

 box-sizing: border-box;

}

微信小程序样式box-sizing用法

6、保存代码,在模拟器查看view的盒子变小了,这是因为box-sizing设置的属性是border-box,这会将border和padding算到width之内

微信小程序样式box-sizing用法

7、在网页设计中除了默认方式和上面的border-box,还有一种将padding算到width的方式,但是在小程序中好像只有border-box和默认的content-box,就是说即使设计成padding-box,依然是content-box默认方式显示

微信小程序样式box-sizing用法

  • Java怎么获取一个数的个位、十位、百位
  • php如何遍历输出数组内容
  • C# winform 登录名存入文件并读取 vs 2010
  • [NetBeans(1)] 修复无法新建项目的问题[TZZ]
  • Java怎么强制类型转换
  • 热门搜索
    保卫萝卜3攻略公园 网络怎么挣钱 隐藏的文件夹怎么显示 柳州旅游攻略必玩的景点 西游记简介100字 鼻毛长怎么办 如何健康快速减肥 塑身衣真的能减肥吗 升旗手简介 三叶减肥茶