CSS calc() function
Instance
Use the calc() function to calculate <div>the width of an element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#div1 {
position: absolute;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
text-align: center;
}
</style>
</head>
<body>
<p>创建一个横跨屏幕的div</p>
<div id="div1">一些文本...</div>
</body>
</html>
Code effect
Definition and usage
The calc() function is used
动态计算长度值
- It should be noted that a space is required before and after the operator, for example: width: calc(100%-10px)
- Any length value can be calculated using the calc() function
- The calc() function supports "+", "-", "*", "/" operations
- The calc() function uses standard precedence rules for mathematical operations
Syntax (parameters)
calc(expression)
