30秒 学懂 css(二)

计算属性calc()

函数calc()支持CSS3; 让你的CSS具有计算功能, CSS属性值就是表达式的结果

html

<div class="box-example"></div>

CSS

.box-example {
  height: 280px;
  background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
  background-position: calc(100% - 20px) calc(100% - 20px);
}

关键点:

calc() :

1. 支持 加+, 减-, 乘*,除/ 运算
2. 可以使用的单位: px, %, rem, em , vw, rem
3. 允许嵌套calc()
4. 平台覆盖率: 96.21%, 支持最低版本 '浏览器 IE9', '安卓浏览器4.4', 'Safari 6.1', Opera内核不支持