如何在CSS中使用算术表达式

最新推荐文章于 2021-07-21 11:00:47 发布

朽木自雕xmzd

最新推荐文章于 2021-07-21 11:00:47 发布

阅读量1.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_16687863/article/details/103488516

版权

前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

有时候，我们需要在CSS中使用一个计算出来的值，而不是一个固定的值，这时候我们可以使用calc（）。

注意：符号两头都需要有空格！！！

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>高度充满父容器</title>
		<style>
			.tmp{
				width: 200px;
				height: calc(100px - 20px);
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="tmp"></div>
	</body>
</html>

效果如下：

当在less中使用如下代码时：

div {
  height: calc(100vh - 88px);
}

最终它的结果会变为：

div {
  height: calc(12vh);
}

这时我们需要写成这种格式：

div {
  height: calc(~"100vh - 88px");
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

朽木自雕xmzd

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何在CSS中使用算术表达式

有时候，我们需要在CSS中使用一个计算出来的值，而不是一个固定的值，这时候我们可以使用calc（）。注意：符号两头都需要有空格！！！代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>高度充满父容器</title> &...
复制链接

扫一扫