微信小程序不支持css文件，仅支持wxss样式和行内style；布局依赖flex，单位用rpx但仅水平缩放；需注意盒模型、真机兼容及渲染时机问题。
微信小程序不支持 CSS 文件，但能用 style 和 class
原生微信小程序（非 Taro、uni-app 等框架）压根不读取 .css 文件——你放进项目里也不会生效。真正起作用的是 WXML 中的 style 行内样式，以及 WXSS 文件里的类选择器。WXSS 是 CSS 的子集，删掉了部分属性（比如 float、position: absolute 在某些版本受限），但 Flex 布局完全可用。
实操建议：
- 把布局逻辑全写进
index.wxss，别试图 import 外部 CSS -
style仅用于动态值（比如根据数据切换颜色），静态布局一律走class - 避免在 WXML 里拼接长
style字符串，容易出错且难维护 - WXSS 中不能用 CSS 变量（
--main-color），但可以用@def（仅部分基础库版本支持），更稳妥的是直接写死或用 JS 计算后传入style
display: flex 是唯一靠谱的布局主线
微信小程序的视图容器（view）默认是 block，但不支持 inline-block 或传统文档流布局。几乎所有实用布局都靠 Flex 实现，而且兼容性极好（从基础库 1.0.0 就稳定支持）。
常见错误现象：
- 写了
display: flex但子元素没对齐 → 忘了给父容器设flex-direction或justify-content - 高度塌陷 → 子
view没设flex: 1或固定height，Flex 容器不会自动撑开 - 在 iOS 上表现异常 → 某些老版本基础库对
align-items: stretch处理有问题，显式写align-items: center更稳
示例：垂直居中一个按钮
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.btn {
width: 200rpx;
height: 80rpx;
}
尺寸单位必须用 rpx，但注意它只缩放宽度
rpx（responsive pixel）是微信小程序的响应式单位，规定屏幕宽为 750rpx。它会按设备宽度等比缩放，但**只作用于水平方向**；高度方向的 rpx 实际上是按比例换算成 px，不会随屏幕高度变化而重算，所以竖向布局别全依赖 rpx。
使用场景与坑：
- 文字大小、边距、宽度用
rpx没问题，比如font-size: 28rpx - 做全屏高度容器时，别写
height: 1334rpx（iPhone 14 Pro Max 的逻辑像素高），应改用height: 100vh或通过wx.getSystemInfo动态设height - 在 iPad 小程序里，
rpx缩放逻辑和手机不同，如果要做横屏适配，得单独判断platform和screenWidth
真机调试时布局错乱，大概率是 overflow 或 box-sizing 隐患
开发工具里看着正常，一到真机就错位、截断、滚动失效——这类问题八成和盒模型有关。微信小程序默认使用 box-sizing: border-box，但部分组件（比如 scroll-view）内部实现会干扰这个行为；另外 overflow: hidden 在某些安卓机型上并不生效。
排查重点：
- 所有带
padding或border的 Flex 容器，手动加box-sizing: border-box（虽然默认是，但显式声明防覆盖） - 用
scroll-view做列表时，它的父容器必须有固定高度，否则内容可能溢出不可见 - 避免嵌套多层
view+overflow: hidden，真机渲染顺序不稳定，优先用clip-path或结构裁剪 - 字体行高（
line-height）设为rpx单位时，在部分低端安卓机上会失准，建议统一用无单位数值（如line-height: 1.5）
复杂点在于：WXSS 的解析和渲染是分阶段的，样式计算、布局、绘制在不同线程，中间任何一环被 JS 阻塞或 setData 过频，都会让 flex 行为看起来“延迟生效”。所以布局问题，往往不是写法错，而是时机没卡准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
