**参考资料**
- 《CSS揭秘》
- w3school
----------
## 背景 ##
很多时候，我们都需要对某个元素设置背景图片，许多同学都写过这样的代码：
```
background-position:top right;
```
但你是否有过疑惑，这里的`top`和`right`是代表的哪儿的`top`和`right`呢？你可能知道，每个元素是一个盒子，每一个盒子有四条边界：外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与 内容边界content edge。 就像这样：
![box][1]
而背景图片只会出现在content-box、padding-box 或 border-box 区域。
![background-origin][2]
那么`background-position`属性指定的到底是哪个矩形边框的右上角呢？
默认情况下，`background-position`是以`padding-box`为准的，这样边框才不会遮住背景图片。因此，`top` `right`默认指的是`padding-box`的右上角。值得一提的是，现在`background`添加了一个属性——`background-origin`，他可以设置值改变`background-position`的基准。`background-origin`的值有三个，分别是： `content-box `、 `padding-box` 、`border-box`。
一般来说，基于DRY原则，我们可以结合`background-position`和`background-origin`使得代码精简，比如：
padding:10px;
background: url("code-pirate.svg") no-repeat #58a bottom right; // 或 100% 100%
background-origin:content-box;
这样是针对一种常见情况，偏移量和容器的内边距一致。因为如果不像上面这样，比如像下面这样，每改变一次padding，那么就不得不改变三处。
padding：10px;
background: url("code-pirate.svg") no-repeat #58a;
background-position: bottom 10px right 10px;
但是，请注意，这里我们使用了`background-position`的扩展语法，即先声明方向，在声明距该方向的值。如：
background-position：top 10px left 20px;
使用扩展语法，我们可以轻松解决距离某方向多少的问题而不用管容器的大小。但是我们还是要考虑某些不支持这种语法的浏览器，所以要提供回退机制,比如这样老套的将`right` `bottom`定位值写进`background`的简写属性中：
background:url("code-pirate.svg") no-repeat right bottom #58a ;
background-position:right 20px bottom 10px;
那么，还有方法能够实现这种扩展语法类似的行为（即偏移某方向一定的距离）吗？
答案是肯定的，有，就是calc（）方案。
calc函数允许我们执行这类运算，即
background:url("code-pirate.svg") no-repeat ;
background-position:calc(100% - 20px) calc(100% - 10px);
事实上，calc（）函数可以进行加减乘除四类运算，只不过加减需要在符号前后各加一个空白符，不然浏览器就会解析错误。既然要用它，兼容性就是一个不得不考虑的问题，不过幸运的是，浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，但是同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器支持很少，几乎全军覆没。
.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
了解到calc（）这个神奇的工具，你是否想到了这个可以用于做自适应布局，是的，关于自适应布局，之前我知道的只有box-sizing，现在貌似它也可以。但是具体，我还没研究过，所以，这里就不讲了。
[1]: http://ogj5ruq17.bkt.clouddn.com/boxmodel%20%281%29.png
[2]: http://ogj5ruq17.bkt.clouddn.com/background-origin.gif
网友评论