css3: calc函数的妙用

马黑黑

通过 CSS 的 position 绝对定位，我们很容易将一个网页可视对象（比如图片、区域）放置到浏览器浏览区域的左上角：

<style type="text/css">
.miniDiv {
    width:100px;
    height:40px;
    background:#ffcc00;
    padding:5px;
    position:absolute;
    left:0px;
    top:0px;
}
</style>

<div class="miniDiv">定位测试</div>

这里，我们将 div 的左边、顶边起始位置分别设为0px，如此，div 的位置就在左上角。此法能成立，全赖 position 定义了 absolute 绝对定位的属性。

放在右上角呢？还有左下角和右下角，怎么设置 left 和 top 值？要知道，我们并不知道访客显示器的分辨率，用百分比如96%也许可以放到大概的位置，可是并不能将盒子的右边边缘与浏览器边缘相挨，再者，1024像素和1920像素的宽度计算起来会有一定差距。

幸好，在 CSS3 里，有一个 calc 函数用于计算 viewpoint 值，其中，viewpointwidth 为视窗宽度（单位 vw ）、viewpointheight 为视窗高度（单位 vh），通过它的检测虽然我们不能得知具体的尺寸，但可以用运算结果来完成定位。

以 viewpointwidth 为例，1个 vw 等于视窗宽度的 1%，则可知 100vw 极为视窗宽度总长；vh 与此同理。

如此，需要盒子出现在右上角，我们用 calc 函数可以用下面的式子设定 div 的 left 值：

calc(100vw - 100px);

必须注意的是，calc 函数内的运算符左右都要有空格！

上面的式子中，为什么要减去100px呢？因为，div的宽度我们设定了100个像素。实际上，还应考虑浏览器纵向滚动条出现时的状况，这里暂且忽略它。

有童鞋可能会问：如果我们不会calc函数，能不能用百分百减去若干像素来设定left和top值？单独用百分比可以，减去px值则行不通，所以 CSS3 才会引入 calc 函数。

下面，在开头 CSS 代码基础上，修改 left 和 top 值，以便定位 div 到右上角、右下角、左下角：

右上角：

left:calc(100vw - 100px);
top: 10px;

右下角：

left:calc(100vw - 100px);
top:calc(100vh - 40px);

左下角：
left:10px;
top:calc(100vh - 40px);

马黑黑

测试：置于右下角

定位测试

马黑黑

本帖的演示，div的位置在没有翻页时有效，就是说，他不能跟随翻页

红影

马黑黑 发表于 2021-12-29 23:48
本帖最后由 马黑黑 于 2021-12-29 23:52 编辑 测试：置于右下角

按照一楼的讲解，这个没在右下啊。

红影

如此，需要盒子出现在右上角，我们用 calc 函数可以用下面的式子设定 div 的 left 值：

calc(100vh - 100px);

看一楼介绍，左右应和vw相关吧，这里怎么是vh

马黑黑

红影 发表于 2021-12-30 00:15
看一楼介绍，左右应和vw相关吧，这里怎么是vh

是应该用vw，忙中出错了。谢谢你的发现，原帖已改

马黑黑

红影 发表于 2021-12-30 00:12
按照一楼的讲解，这个没在右下啊。

在的吧？我这里的效果是这样的。它仅出现在浏览器的纵向滚动条滑动条置顶时

马黑黑

红影 发表于 2021-12-30 00:12
按照一楼的讲解，这个没在右下啊。

就是说，在本页，你返回顶部，就能看到右下角的定位测试

红影

马黑黑 发表于 2021-12-30 08:05
是应该用vw，忙中出错了。谢谢你的发现，原帖已改

干嘛谢啊，我说这个只是想证明我看得很仔细，也真的思考了一下。别的没什么

红影

马黑黑 发表于 2021-12-30 08:08
就是说，在本页，你返回顶部，就能看到右下角的定位测试

嗯嗯，看到了，应该说是屏幕滚动了，就无效了，你说的翻页我弄错了，还以为超过20楼后到第二页才失效呢

红影

马黑黑 发表于 2021-12-30 08:07
在的吧？我这里的效果是这样的。它仅出现在浏览器的纵向滚动条滑动条置顶时

这个功能在绝对定位时非常有用呢，尤其横向定位。这个真好，感谢黑黑带来的好东西

加林森

谢谢老黑的教程！

小辣椒

黑黑，这个没有看见效果，2楼是空白的，是不是手机的原因？

马黑黑

小辣椒 发表于 2021-12-30 12:02
黑黑，这个没有看见效果，2楼是空白的，是不是手机的原因？

手机可能是看不到的吧

马黑黑

红影 发表于 2021-12-30 11:28
这个功能在绝对定位时非常有用呢，尤其横向定位。这个真好，感谢黑黑带来的好东西

还多时候都用得上，只是说我们没用上而已

马黑黑

红影 发表于 2021-12-30 11:27
嗯嗯，看到了，应该说是屏幕滚动了，就无效了，你说的翻页我弄错了，还以为超过20楼后到第二页才失效呢{: ...

滚动条移动是有时候可以成为翻页

马黑黑

红影 发表于 2021-12-30 11:26
干嘛谢啊，我说这个只是想证明我看得很仔细，也真的思考了一下。别的没什么

挺好的发现。其实之前我校对过的，没看得出来

加林森

继续学习

小辣椒

马黑黑 发表于 2021-12-29 23:48
本帖最后由 马黑黑 于 2021-12-29 23:52 编辑 测试：置于右下角

我看见的定位测试在帖子边框外面了，随着网页移动可以上下的，现在就在你一楼的右面了

小辣椒

马黑黑 发表于 2021-12-29 23:48
本帖最后由 马黑黑 于 2021-12-29 23:52 编辑 测试：置于右下角