微信小程序常用的 WXSS、CSS 样式及组合

以下是一些微信小程序中常用的 WXSS、CSS 样式及常用组合，帮助你快速开发界面：

一、常用布局样式

1. Flex 布局（最常用）

.container {
  display: flex;
  flex-direction: row; /* 横向排列（默认） */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
}

/* 垂直方向布局 */
.vertical-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 自动填充剩余空间 */
.flex-item {
  flex: 1;
}

2. Grid 布局

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  gap: 10rpx; /* 间距 */
}

二、常用样式属性

1. 基础样式

/* 字体与颜色 */
.text {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

/* 边距与内边距 */
.box {
  margin: 20rpx;
  padding: 20rpx;
}

/* 边框 */
.border {
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx; /* 圆角 */
}

/* 背景与阴影 */
.card {
  background-color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

2. 定位

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

.fixed {
  position: fixed;
  bottom: 40rpx;
  right: 40rpx;
}

三、常用样式组合

1. 卡片样式

.card {
  padding: 24rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

2. 按钮样式

.primary-button {
  padding: 16rpx 32rpx;
  background: #07c160;
  color: white;
  border-radius: 40rpx;
  text-align: center;
  font-size: 28rpx;
}

/* 禁用状态 */
.button-disabled {
  background: #ddd;
  color: #666;
}

3. 输入框样式

.input {
  padding: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  width: 100%;
  box-sizing: border-box;
}

4. 弹性布局工具类

/* 水平居中 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 两端对齐 */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

5. 文本截断（单行/多行）

/* 单行省略 */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多行省略（2行） */
.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

四、常用动画

/* 渐显动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

/* 缩放动画 */
@keyframes scaleUp {
  from { transform: scale(0.9); }
  to { transform: scale(1); }
}

.scale-up {
  animation: scaleUp 0.2s ease-out;
}