微信小程序入门学习教程，从入门到精通，WXSS样式处理语法基础(9）

WXSS样式处理

以下是对 WXSS（WeiXin Style Sheets） 中常见样式处理知识点的详细整理，包括语法说明、使用方法以及带有详细注释的示例代码，并在最后提供几个综合性案例。

一、尺寸单位

1. rpx（responsive pixel）

定义：微信小程序中的响应式单位，规定屏幕宽度为 750rpx。
换算：在 iPhone6 上，1rpx = 0.5px；在不同设备上自动适配。
适用场景：布局、宽高、边距等。

html 复制代码

<!-- index.wxml -->
<view class="box-rpx">使用 rpx 的盒子</view>

css 复制代码

/* index.wxss */
.box-rpx {
  width: 750rpx;       /* 满屏宽度 */
  height: 200rpx;      /* 高度为屏幕宽度的 200/750 */
  background-color: #4CAF50;
  font-size: 32rpx;    /* 字体大小也推荐用 rpx */
}

2. rem（root em）

定义：相对于根元素（）字体大小的单位。
小程序中：默认 1rem = 16px（可通过 page 样式修改 font-size）。
注意：小程序中较少使用 rem，推荐优先使用 rpx。

css 复制代码

/* 修改根字体大小 */
page {
  font-size: 20px; /* 此时 1rem = 20px */
}

.box-rem {
  width: 10rem;   /* = 200px */
  height: 5rem;   /* = 100px */
  background-color: #2196F3;
}

二、选择器

WXSS 支持大部分 CSS 选择器，但不支持部分高级选择器（如 :nth-child）。

选择器类型	说明	示例
`.class`	类选择器	`.btn { color: red; }`
`#id`	ID 选择器（不推荐，因小程序组件作用域限制）	`#header { }`
`element`	元素选择器	`view { }`
`element, element`	并集选择器	`view, text { }`
`element element`	后代选择器	`view text { }`
`::after`, `::before`	伪元素（部分支持）	`.item::after { content: ''; }`

css 复制代码

/* 选择器示例 */
.container {
  padding: 20rpx;
}

.container view {
  margin-top: 10rpx; /* 所有 container 内的 view */
}

.highlight,
.emphasis {
  color: #ff5722;
}

三、样式导入

1. 外联样式导入（@import）

语法：@import "path/to/style.wxss";
位置：必须写在文件顶部。
用途：复用公共样式（如 reset.wxss、common.wxss）。

css 复制代码

/* common.wxss */
.text-center {
  text-align: center;
}

/* index.wxss */
@import "./common.wxss";

.page {
  background: #f5f5f5;
}

⚠️ 注意：路径是相对于当前文件的相对路径。

四、内联样式

使用 style 属性直接写在 WXML 元素上。
支持动态绑定（通过 JS 数据）。

html 复制代码

<view style="color: {{ textColor }}; font-size: {{ fontSize }}rpx;">
  动态内联样式
</view>

js 复制代码

// index.js
Page({
  data: {
    textColor: '#e91e63',
    fontSize: 36
  }
})

✅ 优点：灵活；❌ 缺点：难以维护，建议仅用于动态样式。

五、布局基础

1. 盒子模型（Box Model）

WXSS 盒子模型与 CSS 一致：content → padding → border → margin

css 复制代码

.box-model {
  width: 300rpx;
  height: 200rpx;
  padding: 20rpx;     /* 内边距 */
  border: 2rpx solid #333;
  margin: 30rpx;      /* 外边距 */
  background-color: #fff;
  box-sizing: border-box; /* 推荐：包含 border 和 padding 在 width 内 */
}

💡 小程序默认 box-sizing: border-box，但显式声明更安全。

2. 浮动（float）与定位（position）

浮动：小程序中支持 float: left/right，但不推荐，因布局能力弱。
定位：支持 position: static / relative / absolute / fixed（fixed 在部分机型有兼容问题）。

css 复制代码

.parent {
  position: relative;
  height: 300rpx;
}

.child {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background: #ff9800;
  padding: 10rpx;
}

html 复制代码

<view class="parent">
  <view class="child">绝对定位</view>
</view>

⚠️ 注意：fixed 定位在 iOS 下可能被键盘遮挡，慎用。

3. Flex 布局（重点推荐）

小程序强烈推荐使用 Flex 布局，简洁高效。

容器属性（父元素）：

属性	说明
`display: flex`	启用 Flex
`flex-direction`	主轴方向（row / column）
`justify-content`	主轴对齐（flex-start / center / space-between 等）
`align-items`	交叉轴对齐（center / flex-start / stretch）
`flex-wrap`	是否换行

项目属性（子元素）：

属性	说明
`flex`	缩写：`flex-grow flex-shrink flex-basis`
`align-self`	单个项目对齐方式

html 复制代码

<view class="flex-container">
  <view class="flex-item">1</view>
  <view class="flex-item">2</view>
  <view class="flex-item">3</view>
</view>

css 复制代码

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* 两端对齐 */
  align-items: center;
  padding: 20rpx;
  background: #f0f0f0;
}

.flex-item {
  width: 150rpx;
  height: 150rpx;
  background: #9c27b0;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

六、本章小结

单位：优先使用 rpx 实现响应式。
选择器：支持常用 CSS 选择器，避免使用不兼容的伪类。
样式组织 ：公共样式用 @import，动态样式用内联。
布局：强烈推荐 Flex，避免 float 和复杂定位。
盒子模型 ：理解 box-sizing: border-box 的作用。

七、综合性案例

案例1：商品卡片（Flex + rpx + 盒子模型）

html 复制代码

<view class="product-card">
  <image class="product-img" src="/images/goods.jpg" mode="aspectFill"></image>
  <view class="product-info">
    <text class="product-title">智能蓝牙耳机</text>
    <text class="product-price">¥299</text>
    <view class="rating">
      <text>★★★★☆</text>
    </view>
  </view>
</view>

css 复制代码

.product-card {
  display: flex;
  padding: 20rpx;
  background: white;
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.product-img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.product-info {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.product-price {
  font-size: 36rpx;
  color: #e91e63;
  font-weight: bold;
}

.rating {
  font-size: 24rpx;
  color: #ff9800;
}

案例2：底部导航栏（Fixed + Flex）

html 复制代码

<view class="bottom-bar">
  <view class="bar-item">
    <text class="icon">🏠</text>
    <text>首页</text>
  </view>
  <view class="bar-item">
    <text class="icon">🔍</text>
    <text>搜索</text>
  </view>
  <view class="bar-item">
    <text class="icon">🛒</text>
    <text>购物车</text>
  </view>
  <view class="bar-item">
    <text class="icon">👤</text>
    <text>我的</text>
  </view>
</view>

css 复制代码

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  background: white;
  border-top: 2rpx solid #eee;
  z-index: 999;
}

.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.icon {
  font-size: 36rpx;
  margin-bottom: 6rpx;
}

💡 注意：使用 fixed 时，页面内容底部需留出空间（如 padding-bottom: 100rpx）。

案例3：响应式网格布局（Flex + rpx）

html 复制代码

<view class="grid-container">
  <view class="grid-item" wx:for="{{[1,2,3,4]}}" wx:key="index">Item {{index+1}}</view>
</view>

css 复制代码

.grid-container {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
}

.grid-item {
  width: 345rpx; /* (750 - 20*3) / 2 ≈ 345 */
  height: 200rpx;
  margin: 10rpx;
  background: #e3f2fd;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12rpx;
}

以上内容涵盖了 WXSS 核心语法与实战技巧，适用于微信小程序开发中的绝大多数样式场景。建议在实际项目中以 Flex + rpx + 模块化样式 为主架构。