微信小程序开发-计算器-笔记（一）

一碗烫烫的汤圆

于 2019-11-19 17:04:17 发布

阅读量675

点赞数

分类专栏：微信小程序文章标签：微信小程序计算器

本文链接：https://blog.youkuaiyun.com/a5276957/article/details/103143642

版权

本文详细介绍了微信小程序中.wxss文件的常用样式属性，如display:flex实现弹性布局，flex-direction调整元素排列方向，font-size和line-height设置字体样式，border-radius创建圆角边框，以及position和z-index的定位技巧。同时，讨论了rpx单位与px的转换，并讲解了icon组件的使用和点击效果配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

.wxss文件

微信小程序—wxss常用属性：https://blog.youkuaiyun.com/weixin_42089197/article/details/82624597

一、第一部分

view: 视图容器
button：按钮

.btnGroup {
   
  display: flex;
  flex-direction: row;
  width: 760rpx;
}

display：组件内的元素显示方式。
display:flex 意思是弹性布局

父级元素定义display:flex，子元素宽度用flex来定义。
假设有2个子元素，元素一设置flex:1，元素二flex:2，相当于元素一占整个父元素的1/3，元素二占2/3的意思。

flex-direction 容器内元素的排列方向(默认横向排列)
1：flex-direction:row; 沿水平主轴让元素从左向右排列
2：flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
3：flex-direction:row-reverse;沿水平主轴让元素从右向左排列

详情请看：https://www.jianshu.com/p/d9373a86b748

二、第二部分

.btn-item {
   
  width: 25%;
  line-height: 150rpx;
  font-size: 16px;
  /* position: 0; */
  align-items: center;
  text-align: center;
  padding: 0;
  border