视口单位 (vw 或 vh)
这两个 right 属性的计算方式分别使用了不同的单位和参照对象，它们之间的区别体现在 计算的基准不同，一个是基于 视口宽度（100vw），另一个是基于 父元素宽度（100%）。让我们详细解释一下。
1. right: calc(100vw - 252px)
100vw是 视口宽度 的 100%。vw（viewport width）是视口宽度的单位，1vw 等于视口宽度的 1%。- 所以，
100vw表示视口的整个宽度（即浏览器窗口的宽度）。
含义：
right: calc(100vw - 252px)表示将元素的右边缘定位在视口宽度减去 252px 的位置。- 由于这个计算是基于视口的宽度来进行的，因此元素的位置会受浏览器窗口宽度变化的影响，当你调整浏览器的大小时，元素的位置会动态调整。
使用场景：
- 适用于需要基于 浏览器视口宽度 来定位元素的场景。比如一些全屏布局、弹出层、横幅等。
2. right: calc(100% - 252px)
100%是 父元素的宽度 或 包含块的宽度。100%通常指的是当前元素的父元素或包含块的宽度。
含义：
right: calc(100% - 252px)表示将元素的右边缘定位在父元素的右边缘减去 252px 的位置。- 这个计算是基于父元素的宽度进行的，因此右边距的计算与父元素的宽度有关，如果父元素的宽度变化，元素的右边距会随之变化。
使用场景：
- 适用于需要 相对于父元素 进行定位的场景。比如在一个容器内部定位弹出菜单、对话框等。
总结：
right: calc(100vw - 252px)计算基于 视口宽度，因此会受到浏览器窗口的宽度影响，适用于全屏布局或与窗口宽度有关的布局。right: calc(100% - 252px)计算基于 父元素宽度，因此会受到父元素的宽度影响，适用于容器内的相对定位。
举个例子：
假设你有一个父元素的宽度为 1000px，视口宽度为 1200px：
right: calc(100vw - 252px)：100vw= 1200px，calc(1200px - 252px)= 948px，所以元素的右边缘会位于 948px 处（从视口右边缘开始）。
right: calc(100% - 252px)：100%= 1000px（父元素宽度），calc(1000px - 252px)= 748px，所以元素的右边缘会位于父元素的右边缘向左 252px 的位置（即右边距为 748px）。
通过这种对比，可以看到两者的计算方式和结果是完全不同的，一个是相对于视口宽度定位，另一个是相对于父元素宽度定位。
