css3: calc函数的妙用
本帖最后由 马黑黑 于 2021-12-30 08:05 编辑通过 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);
本帖最后由 马黑黑 于 2021-12-29 23:52 编辑 <br /><br /><p>测试：置于右下角</p>
<style type="text/css">
.miniDiv {
width:100px;
height:40px;
background:#ffcc00;
padding:5px;
position:absolute;
left:calc(100vw - 130px);
top:calc(100vh - 40px);
}
</style>
<div class="miniDiv">定位测试</div> 本帖的演示，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，忙中出错了。谢谢你的发现，原帖已改
干嘛谢啊，我说这个只是想证明我看得很仔细，也真的思考了一下。别的没什么{:4_173:} 马黑黑 发表于 2021-12-30 08:08
就是说，在本页，你返回顶部，就能看到右下角的定位测试
嗯嗯，看到了，应该说是屏幕滚动了，就无效了，你说的翻页我弄错了，还以为超过20楼后到第二页才失效呢{:4_173:} 马黑黑 发表于 2021-12-30 08:07
在的吧？我这里的效果是这样的。它仅出现在浏览器的纵向滚动条滑动条置顶时
这个功能在绝对定位时非常有用呢，尤其横向定位。这个真好，感谢黑黑带来的好东西{:4_199:} 谢谢老黑的教程！{:4_199:} 黑黑，这个没有看见效果，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-30 17:32 编辑 <br /><br />继续学习 马黑黑 发表于 2021-12-29 23:48
本帖最后由 马黑黑 于 2021-12-29 23:52 编辑 测试：置于右下角
我看见的定位测试在帖子边框外面了，随着网页移动可以上下的，现在就在你一楼的右面了 马黑黑 发表于 2021-12-29 23:48
本帖最后由 马黑黑 于 2021-12-29 23:52 编辑 测试：置于右下角
页:
[1]
2