版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/palmer_kai/article/details/82752274
css calc 计算属性值
definition
The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a , , ,
Syntax
+,-,*,/ 可进行加减乘除简单的表达式运算
Note:
- 加减法的时候需要注意 操作符两侧需要有 whitespace
- 乘除法的时候需要注意 操作符两侧不需要 whitespace
examples
input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
h1 {
font-size: calc(1.5rem + 3vw);
}
比如说实现一个 banner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>calc</title>
<style>
.banner {
position: absolute;
left: 40px;
width: calc(100% - 80px);
border: solid black 1px;
box-shadow: 1px 2px;
background-color: yellow;
padding: 6px;
text-align: center;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="banner">This is a banner!</div>
</body>
</html>
效果
以前，我一般会选用一个 wrapper 使用 padding 来控制 两侧的 gap。 现在一个 dom 就可以搞定了