碎片化学习前端之CSS（calc 函数）

calc 函数

CSS 算术运算函数，用于计算 CSS 长度相关属性的值。

calc 函数可以动态计算长度值，主要应用屏幕适配过程中，视口的宽、高变化的情况。

calc 函数的基本用法

calc() 函数接收一个参数，该参数为表达式，如 calc(expression)。

expression

expression 是表达式，表达式由操作数和运算符组成。

calc() 的参数表达式是算术表达式，算术运算符有 +, -, *, / 。操作数与算术运算符之间用空格隔开，如 a + b。

Demo 案例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>css-var</title>
	<style type="text/css">
		.container {
			width: 200px;
			height: 200px;
			border: 1px solid #ccc;
			display: flex;
			justify-content: space-between;
		}

		.container div {
			width: calc(100% / 4 + 5px);
			height: 100%;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="container">
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>

案例结果

posted @ 2023-03-07 14:42  深巷酒  阅读(133)  评论(0)  编辑  收藏  举报