min-height: 100vh

• 含义：最小高度设置为视口（viewport）的100%
• 作用：确保容器至少占满整个屏幕的高度
• vh单位：视口高度单位，100vh = 100% 视口高度
• 动态变化：随浏览器窗口大小变化

min-height 优先级顺序：

如果一个元素同时被设置了这三个属性：

• min-height 优先级最高（如果内容不够高，它强制撑开）。
• max-height 优先级次之（如果内容太高，它强制截断）。
• height 优先级最低（只有在 min 和 max 不干预时才生效）。

百分比问题:

height: 50%：生效。只要父元素有明确的高度（例如 height: 400px），子元素就能按比例计算

min-height: 50%：不生效。在某些浏览器或布局中，min-height 的百分比值对父元素高度的计算方式比较特殊，有时会被视为 0 或者需要父元素有视口单位（如 100vh）才能正确计算。

和height的比较

height:100px

min-height:100px;

background-color: #f5f5f5

• 含义：背景颜色设置为浅灰色
• 作用：给页面提供统一的浅色背景
• 颜色值：#f5f5f5 是一种浅灰色

padding-bottom: 120rpx

• 含义：底部内边距为120rpx
• 作用：预留空间避免内容被底部按钮遮挡
• rpx单位：响应式像素单位，在不同设备上自动适配

效果

rpx单位的说明

rpx 的设计初衷是为了适配不同尺寸的屏幕。它的换算规则是：

规定屏幕的物理宽度为 750rpx。

也就是说，无论你的手机屏幕实际宽度是多少（375px、414px 还是 750px），在小程序或这些框架的逻辑里，横向都被划分为 750 份。

• 设备物理像素：屏幕宽度为 375px。
• 

结论：
在 iPhone 6/7/8 这类设备上，padding-bottom: 120rpx 等同于 padding-bottom: 60px。

border-radius: 16rpx

• 含义：设置元素四个角的圆角半径为16rpx
• 效果：让矩形卡片的四个角变圆滑
• 视觉效果：现代化、柔和的外观

padding: 30rpx

• 含义：内容与边框之间的内边距为30rpx
• 效果：内容距离卡片边缘有30rpx的间距
• 目的：防止内容紧贴边框，提升可读性

margin-bottom: 20rpx

• 含义：元素下方的外边距为20rpx
• 效果：每个预约项之间有20rpx的间隔
• 目的：区分不同的预约记录

效果图：

box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05)

定义了一个非常柔和、淡淡的底部投影。它通常被用在卡片（Card）或导航栏上，用来增加一点立体感，但又不想显得太突兀。

• 第一个值 0：水平偏移量（0 = 不偏移）
• 第二个值 4rpx：垂直偏移量（向下偏移4rpx）
• 第三个值 12rpx：模糊半径（数值越大越模糊）
• 第四个值 rgba(0, 0, 0, 0.05)：阴影颜色（黑色，透明度5%）

display: flex; // 启用弹性盒子布局

justify-content: space-between; // 主轴对齐方式

align-items: center; // 交叉轴对齐方式

display: flex

• 含义：将容器设置为弹性盒子布局模式
• 效果：其子元素成为 flex items，可以灵活排列
• 作用：为后续的对齐属性提供基础

justify-content: space-between

• 含义：主轴（水平方向）上的对齐方式
• 效果：
  • 第一个子元素靠左对齐
  • 最后一个子元素靠右对齐
  • 中间的子元素平均分配剩余空间
• 结果：元素之间拉开最大距离

水平对齐

水平对齐是指元素在一行内或一个容器宽度范围内，沿着水平方向（从左到右）的排列方式。

左对齐 (Left Align): 所有行的文本或元素都靠左边的边界对齐，右边看起来参差不齐。这是最常见的对齐方式，比如你正在阅读的这段文字就是左对齐的

[ 这是左对齐的文本。 ]

居中对齐

每行的文本或元素都位于中间位置，左右两边的空白大致相等。

右对齐

所有行的文本或元素都靠右边的边界对齐，左边看起来参差不齐。

align-items: center

• 含义：交叉轴（垂直方向）上的对齐方式
• 效果：所有子元素在垂直方向居中对齐
• 结果：子元素在容器中垂直居中

垂直对齐

默认按照基线对齐的方式来对齐

浏览器会按默认的 baseline 规则进行对齐。您可以看到，文字的基线（可以想象为字母 'g' 的下半部分）和两个图形的底部是对齐的

font-size: 32rpx; // 字体大小

font-weight: bold; // 字体粗细

color: #333; // 字体颜色

如果只有flex的话 则默认下面的样式:

& 的含义

& 是 Sass/SCSS 中的父选择器引用符，它代表父级选择器。

box-sizing: border-box;

具体样式为

  width: 100%;
  padding: 10rpx 40rpx;
  margin-top: 10rpx;
  box-sizing: border-box;

1. width: 100%;
   让元素的宽度占满它的父容器。

2. padding: 10rpx 40rpx;
   设置内边距（元素内容与边框之间的距离）。这里用了两个值，意思是：上下内边距为 10rpx，左右内边距为 40rpx。（rpx 是响应式单位，会根据屏幕宽度自动缩放）。

3. margin-top: 10rpx;
   设置外边距。让这个元素的顶部与它上方的元素保持 10rpx 的距离。

4. box-sizing: border-box;（重点来了 🌟）
   这个属性决定了浏览器如何计算元素的总宽度和总高度。

   • 默认的 content-box：如果你设置 width: 100%，再加上 padding: 40rpx，浏览器会把 padding 加到 100% 的外面。结果就是元素的实际宽度变成了 100% + 80rpx（左右各40），这通常会导致元素撑破父容器，页面出现横向滚动条。
   • border-box：告诉浏览器，你设置的 width: 100% 必须包含 padding 和 border。浏览器会自动把内容区（content）的宽度缩小，给 padding 腾出空间。这样元素的实际宽度就死死卡在 100%，无论怎么加 padding，都不会撑破布局。

content-box 以及 border-box 效果( 后面一直用border-box就行了)