css携程讲解,【译】CSS的布局数学：读懂calc – 携程设计委员会

这20年来，网页的布局从以前的定宽设计，逐渐发展为现在的响应式设计，CSS变得更加流畅且精妙。站点样式表描述了一些单位的特征，它们互相交互成为一个设计。设计师和开发人员不仅需要懂得每一种CSS度量系统，也需要知道绑定单位、在样式表里添加单位的方法。

我们今天学习强大的clac属性，虽然它很强大，但是有时我们并不知道该怎么使用它，让我们通过例子来熟悉这个属性。先来个简单的例子：

例一：垂直对齐margin

我们用Stian Klo的这张瀑布照片做这个例子，这张图片向左浮动，它的右边有2rem的margin。

图片是自适应的，它的宽度被设为父级元素宽度的50%，HTML如下：

Det er et velkjent faktum...

在这个设计中，我们希望margin不变，在视觉上我们关注图片下面的负空间。这个例子的问题就是照片的自适应导致了视口变窄时文本最终会在照片下面折行：

解决这个问题有很多方法，基本上我们想要的是以下结果：

“跟在图片之后的文本段落应该有一个50%加2rem的左边距”

使用相邻选择器加calc属性，我们得到：

img ~ p { margin-left: calc(50% + 2rem); }

效果图：

注意，跟我们想象的不同，图片的margin和段落的margin没有合并，而是覆盖了，因为float的奇效让图片上的margin成为多余的。

calc属性让我们可以把不同的度量方式结合起来——百分比和rem，使得 margin固定而图片自适应。

例二：有内边距容器中的100%宽元素

页面中有一个含有内边距的容器，容器中有100%宽的元素，这样的布局非常常见：

Det er et velkjent faktum at lesere distraheres av lesbart innhold p? en side n?r man ser p? dens layout...

CSS如下：

* { box-sizing: border-box; }

body { background: #000; font-family: Edelsans, sans-serif; line-height: 1.5; }

article { width: 80%; margin: 0 auto; background: #fff; padding: 0 2rem; color: #000; }

article header img { width: 100%; height: auto; }

问题在于上的padding会强制让呆在里面：

我们可以通过使用calc属性为添加声明来解决这个问题：

article header { width: calc(100% + 4rem); margin-left: -2rem; }

在上添加的4rem的宽度弥补了左右padding的4rem：

运算

calc可以完成所有你熟悉的基础数学运算：

符号

运算

+

加法

-

减法

*

乘法

/

除法

calc()上的运算

有一个很重要的点需要记住，加法运算和减法运算的符号两边必须有空格，而calc后面必须紧跟括号，像这样：

width: calc(20% - 1rem);

这样写是不行的：

width: calc(20%-1rem);

这样写也不行：

width: calc (20% - 1rem);

这其实很好理解，因为如果一个减法符号后面紧跟着一个数值，它会被认为是负数。乘法和除法运算符号不要求两边有空格，不过我们还是推荐加上空格的写法。

支持和限制

所有现代浏览器都支持CSS的calc属性来计算长度单位，理论上说，calc可以存在于任何有数值的地方，这样会出现一些很有趣的写法：

.box { background: rgba(255, 0, 0, calc(.3 * 2)); }

或者这样：

.box { transform: rotate(calc(45deg - 2.31rad)); }

当calc遇到这些边缘情况时，大多数浏览器会发出警告：

Chrome和Opera支持calc的所有用法，但是 Chrome 38 / Opera 25之前的版本不支持角度单位的运算。

目前， Firefox只支持 长度单位和百分比的calc运算。

Safari / Mobile Safari：支持 3D CSS transform和颜色的运算，但是非常奇怪，不支持2D transform。

Android 4.4只支持加法和减法运算，更早的版本完全不支持calc属性。Android上的Chrome 38和它完全成熟的PC端版本提供一样的支持。

Internet Explorer 9+(PC端和移动端)对长度单位的calc支持的很好。如果calc同时运用在background-position属性中，IE9会崩溃。

谢天谢地，大多数支持的浏览器不一定需要加上供应商前缀。

感谢Ana Tudor对这项研究的贡献；更多浏览器兼容性的信息请看caniuse.com。

calc还能被用在计算CSS渐变颜色变化的位置，还有很多其他的用法。

总结

数学运算是Sass这种处理器比传统CSS高级的特征之一，虽然处理器仍然有很多的优势，不过像calc这样的属性会让两者之间的差距越来越小。

本文作者：fhz　转载请注明来自：携程设计委员会