CSS calc()函数
  CSSWeb   0 评论

CSS calc()函数

  CSSWeb   0 评论

概述

CSS函数calc()可以用在任何一个需要 <length><frequency><angle><time><number><integer> 的地方。有了 calc() ,你就可以通过计算来决定一个CSS属性的值了。

你还可以在一个 calc() 内部嵌套另一个 calc() ,里面的 calc() 会被简单地视为加了括号

语法

/* property: calc(expression) */
width: calc(100% - 80px);

表达式

该表达式可以使用以下运算符任意组合(使用正常的运算符优先级顺序)。

表达式中的操作数可以使用任意语法种类的长度。如果你愿意,你可以在一个表达式中混用多种不同的长度单位。在需要时,你还可以使用小括号来调整计算顺序

注:用 0 作除数会让 HTML 解析器抛出异常.

注:+`- 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值。而 calc(8px + -50%)会被解析成为一个长度后跟一个加号再跟一个负百分比。
*/ 运算符不需要空白符,但考虑到统一性,仍然推荐加上空白符

注: Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables MAY be treated as if auto had been specified.

正式语法

calc( <calc-sum> )where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

例子

使用指定的外边距定位一个对象

使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距 。在这个例子中,使用 CSS 创建了一个横跨整个窗口的 banner,该 banner 左右两边各有一个距离窗口边缘 40 像素的间距:

.banner {
    position: absolute;
/* fallback for browsers which still doesn't support for `calc()` */
    left: 5%;
    width: 90%;
/* overwrite, if the browsers support for `calc()`*/
    left: calc(40px);
    width: calc(100% - 80px);
    border: 1px solid black;
    box-shadow: 1px 2px;
    background-color: yellow;
    padding: 6px;
    text-align: center;
}
<div class="banner">This is a banner!</div>

自动调整表单域的大小以适应其容器的大小

calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘.

看一下下面的CSS:

input {
  padding: 2px;
  display: block;
  width:  98%; 
/* fallback for browsers without support for calc() */
  width:  calc(100% - 1em);  
}

#formbox {
  width:  130px; 
/* fallback for browsers without support for calc() */
  width:  calc(100% / 6);   
  border: 1px solid black;
  padding: 4px;
}

这个例子中, form 元素自身使用了窗口可用宽度的 1/6 ,然后,为了让 form 元素内部的input元素保持合适的大小,我们再一次使用了 calc() ,让它的宽度为其容器的宽度减 1em。下面的HTML使用了上面的CSS:

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

使用CSS变量来嵌套calc()

我们来看一下下面的代码:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

在所有的变量都被展开后, widthC 的值就会变成 calc( calc( 100px / 2) / 2),然后当它被赋值给 .foowidth 属性 时,所有内部的这些 calc()(无论嵌套的有多深)都将会直接被“拍”成一个括号(原文:be flattened to just parentheses),所以这个 width属性 的值就直接相当于 calc( ( 100px / 2) / 2) 了,或者说就变成25px 了。 简而言之:一个 calc() 里面的 calc() 就仅仅相当于是一个括号

规范

规范 状态 注释
CSS Values and Units Module Level 3calc() Candidate Recommendation Initial definition

文章来源

回复