html中calc属性什么意思,深入理解CSS calc属性

在过去的几年时间里，前端WEB页面的布局已经从固定宽度演变为现在的响应式布局。本教程将带大家理解CSS calc属性，这是一个非常有用的属性，理解它的最好方法是举一些例子。

Example 1：垂直Margin(Vertical Flush Margins)

来看看下面的一张图片：图片中的瀑布图片被浮动起来，右边有2em的margin。图片被制作为流式布局，宽度为它的父元素的50%。它的html结果如下：

Det er et velkjent faktum...

现在，我们想要瀑布图片的margins沿着垂直方向延伸，现在的问题是p段落的文字最终会跑到图片的下方去。我们想要的效果如下图：

解决的方法有很多种，我们这里要遵从下面的原则：跟随在图片后的p元素要有50%+2em的左margin。

我们在兄弟选择器上使用calc属性来解决这个问题：

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

calc 允许我们融合不同的单位：百分比和rem，从而得到margin固定而图片是流式布局的效果。

Example 2：容器中的全屏宽度(Full-Width Elements In Padded Containers)

来看下面的例子：

HTML

......

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; }

上面的代码得到的页面效果如下：

这个设计的问题是给 article 元素的padding会作用在header上。使图片也一起被压缩了。

我们能通过在header元素上使用calc解决这个问题。

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

通过在head上添加4rem的宽度来弥补左右两侧的2rem的padding。得到结果如下：

操作符(Operations)

calc可以做基本的数学运算：+、-、*、/。

有一点要记住，calc在做加法和减法运算时，在它的操作符两侧必须有空格隔开并且calc必须紧贴着括号。例如：

下面的写法是正确的：

width: calc(20% - 1rem);

下面的写法是错误的：

width: calc(20%-1rem);

下面的写法也是错误的：

width: calc (20% - 1rem);

如果书写错误，浏览器会将“-”号解释为“负值”。乘法和除法不需要添加空格，但是建议都加上空格。

浏览器支持和局限性

所有的现代浏览器都支持使用calc来计算长度。理论上，可以在任何地方使用这些calc计算，这将会 得到一些非常有趣的效果：

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

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

如果你看到上面的两个方形分别是半透明和旋转一定角度的，那么祝贺你，你的浏览器支持不同声明的CSS calc属性。大多数浏览器对这种极端情况都做了声明：

Chrome和Opera：支持所有的calc，但是Chrome 38 / Opera 25不支持角度计算。

Firefox：仅支持calc的长度和百分比计算。

Safari / Mobile Safari：calc可以计算3D CSS transforms和olor calculations。但奇怪的是，它不支持2D transforms。

Android 4.4:仅支持加法和减法运算，较早的版本完全不支持calc。

Chrome 38 on Android:和它的桌面版本支持是一样的。

Internet Explorer 9+:(desktop and mobile)支持长度计算。如果在IE9中使用calc来计算background-position，IE9将崩溃！

另外，绝大多数浏览器在使用calc时不需要添加厂商的前缀。