css calc()计算函数

最新推荐文章于 2024-06-04 08:41:55 发布

rebooting_now

最新推荐文章于 2024-06-04 08:41:55 发布

阅读量861

点赞数

文章标签： calc css calc

本文链接：https://blog.csdn.net/rebooting_now/article/details/87971592

版权

什么是calc()计算函数呢？

定义与用法

calc() 函数用于动态计算长度值。

● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

● 任何长度值都可以使用calc()函数进行计算；

● calc()函数支持 "+", "-", "*", "/" 运算；

● calc()函数使用标准的数学运算优先级规则

浏览器支持

表格中的数字表示支持该函数的第一个浏览器版本号。

"webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。

函数
calc()	26.0 19.0 -webkit-	9.0	16.0 4.0 -moz-	7.0 6.0 -webkit-	15.0

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	.hh{
		width: 30%;
		border: 1px solid red;
		height: 100px;
	}
	.aa{
		display: inline-block;
		width: 100px;
		border: 1px solid blue;
	}
	.bb{
		display: inline-block;
		width: calc(100% - 100px );
		border: 1px solid purple;
	}
</style>
<body>
<table>
	<div class="hh">
		<span class="aa">问题：</span>
		<span class="bb">回答内容</span>
	</div>
</table>
	
</body>
</html>
<script>
</script>