前言

这是在做 《#小程序云开发挑战赛#-情侣券-想做就做》 这个项目过程中遇到了两个CSS不规范导致布局显示的问题。

踩坑

布局重叠

效果展示

左边是iOS手机，右边是模拟器（Android手机效果一致）

布局代码

采用的布局结构是外面一个view用盒子模型包裹这三个布局，分别是头图区域，自定义模版模块，系统模版模块。

解决方案

最后定位是因为最外层的布局写死了高度的原因，把高度去掉就好了。
样式代码：

.container{
  width: 100vw;
 /* height: 100vh; */
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
}

布局错位

效果展示

左边是iOS手机，右边是模拟器（Android手机效果一致）

布局代码

由于需要覆盖到中心点，中间的【已使用】状态的印章图片采用的是 absolute（绝对定位）定位到中心点。

解决方案

在外层的布局上加一个 relative（相对定位）的定位方式。

总结

感谢【微喵网络】在评论区指出本文问题和推荐学习网站，目前已修改。
CSS学习网站：https://developer.mozilla.org/zh-CN/docs/Web/CSS

如果觉得不错就给我的 《#小程序云开发挑战赛#-情侣券-想做就做》 点个赞，谢谢。