Page 55 - css揭秘

地，还有一个更简单的办法可以实现这个需求：让它自动地跟着我们设定的
内边距走，不用另外声明偏移量的值。
在网页开发生涯中，你很可能多次写过类似 background-position:
top left; 这样的代码。你是否曾经有过疑惑：这个 top left 到底是哪
个左上角？你可能知道，每个元素身上都存在三个矩形框（参见图 2-14）：
border box（边框的外沿框）、padding box（内边距的外沿框）和 content box
图 2-14 （内容区的外沿框）。那 background-position 这个属性指定的到底是哪个
盒模型 矩形框的左上角？

默认情况下，background-position 是以 padding box 为准的，这样边
框才不会遮住背景图片。因此，top left 默认指的是 padding box 的左上
角。不过，在背景与边框（第三版）（http://w3.org/TR/css3-background）中，
我们得到了一个新的属性 background-origin，可以用它来改变这种行为。
在默认情况下，它的值是（闭着眼睛也猜得到）padding-box。如果把它的
值改成 content-box（参见下面的代码），我们在 background-position 属
性中使用的边角关键字将会以内容区的边缘作为基准（也就是说，此时背景
图片距离边角的偏移量就跟内边距保持一致了）：

padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
bottom right; /* 或 100% 100% */
background-origin: content-box;

它的视觉效果跟图 2-13 是完全一样的，但我们的代码变得更加 DRY
了。另外别忘了，在必要时可以把这两种技巧组合起来！如果你想让偏
移量与内边距稍稍有些不同（比如稍微收敛或超出），那么可以在使用
background-origin: content-box 的同时，再通过 background-position
的扩展语法来设置这些额外的偏移量。

试一试 play.csssecrets.io/background-origin

calc() 方案

! 让我们回顾一下本节开头的挑战：把背景图片定位到距离底边 10px 且
请不要忘记在 calc() 函数 距离右边 20px 的位置。如果我们仍然以左上角偏移的思路来考虑，其实
内部的 - 和 + 运算符的两侧各加
一个空白符，否则会产生解析错 就是希望它有一个 100% - 20px 的水平偏移量，以及 100% - 10px 的垂直
误！这个规则如此怪异，是为了 偏移量。谢天谢地，calc() 函数允许我们执行此类运算，它可以完美地在
向前兼容：未来，在 calc() 内部 background-position 属性中使用：
可能会允许使用关键字，而这些
关键字可能会包含连字符（即减 background: url("code-pirate.svg") no-repeat;
号）。 background-position: calc(100% - 20px) calc(100% - 10px);

24 第 2 章 背景与边框

඀ࠡ JOEC