CSS中的 calc 函数

こ雲淡風輕ζ 提交于 2019-12-03 09:22:54

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。它可以用在如下场合:<length><frequency><angle><time><number>、或<integer>

此 calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。
+
加法
-
减法
*
乘法,乘数中至少要有一个是 <number> 类型的
/
除法,除数(/右面的数)必须是 <number> 类型的

表达式中的操作数可以使用任意<length> 值。如果你愿意,你可以在一个表达式中混用这类值的不同单位。在需要时,你还可以使用小括号来建立计算顺序。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.d1 {
				width: 400px;
				height: 300px;
				background: lavender;
				position: relative;
				
			}
			.d2 {
				position: absolute;
				left: 50px;
				width: calc(100% - 100px);
				height: 10px;
				background: black;
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<div class="d2">
				
			</div>
		</div>
	</body>
</html>

  

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!