CSS之calc()
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); }
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
