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); }
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
