标签：运算优先级 一个 优先 info 函数实现 核心 src 运算 注意
calc() 函数支持任意CSS长度单位的混合计算，遵循标准数学运算优先级规则，可以动态计算长度值。注意，calc()函数内部的运算符两侧各加一个空白符，否则会产生解析错误。
calc()使用的难点在于百分比，理解了百分比定位，使用calc()就非常便捷。譬如以background-position中使用为例。
将背景图片偏移距离底部10px
<div class=‘container‘> </div>
可以采用采用关键字的形式
.container {
width: 700px;
height: 400px;
background-color: #ccc;
margin: 0 auto;
background-image: url(./images/1.jpg);
background-size: contain;
background-repeat: no-repeat;
/* 核心代码 */
background-position:left 0 bottom 10px;
}
也可以采用calc()函数实现：
.container {
width: 700px;
height: 400px;
background-color: #ccc;
margin: 0 auto;
background-image: url(./images/1.jpg);
background-size: contain;
background-repeat: no-repeat;
/* 核心代码 */
background-position: 0 calc(100% - 10px);
}
实现效果
标签：运算优先级 一个 优先 info 函数实现 核心 src 运算 注意
原文地址：https://www.cnblogs.com/f6056/p/11388121.html
