• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • calc()

    版本:CSS3

    calc()此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合:<length><frequency>,<angle><time><percentage><number>、或<integer>

    示例

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

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE9以上版本的浏览器都支持calc()

    语法

    calc(四则运算)

    此 calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。

    • +:加法。
    • -:减法。
    • *:乘法,乘数中至少有一个是<number>
    • /:除法,除数(/右面的数)必须是<number>

    表达式中的运算对象可以使用任意<length>值。如果你愿意,你可以在一个表达式中混用这类值的不同单位。在需要时,你还可以使用小括号来建立计算顺序。

    备注

    • +-运算符的两边必须要有空白字符。比如,calc(50%-8px)会被解析成为一个无效的表达式,解析结果是:一个百分比后跟一个负数长度值。而加有空白字符的、有效的表达式 calc(8px +-50%)会被解析成为:一个长度后跟一个加号再跟一个负百分比。
    • */这两个运算符前后不需要空白字符,但如果考虑到统一性,仍然推荐加上空白符。
    • 0作除数会使 HTML 解析器抛出异常。
    • 涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式,auto可视为已指定。
    • calc()函数支持嵌套,但支持的方式是:把被嵌套的 calc()函数全当成普通的括号。

    说明:

    用于动态计算长度值。

    • 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100%- 10px);
    • 任何长度值都可以使用calc()函数进行计算;
    • calc()函数支持"+","-","*","/"运算;
    • calc()函数使用标准的数学运算优先级规则;
    • 当在background-position中使用calc()时将会导致浏览器崩溃;
    • 部分版本在使用calc()时,乘法和除法可能无效;

    无障碍相关考量

    当 calc()被用于控制文本的长度时,确保值中包含一个相对长度单位,例如:

    h1 {font-size: calc(1.5rem + 3vw);}
    

    实例

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

    .banner {
      position: absolute;
      left: 40px;
      width: calc(100% - 80px);
      border: solid black 1px;
      box-shadow: 1px 2px;
      background-color: yellow;
      padding: 6px;
      text-align: center;
      box-sizing: border-box;
    }
    
    <div class="banner">This is a banner!</div>
    

    calc()的另外一个用例是用来确保一个表单域的大小适合当前的可用空间,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘。form 元素自身使用了窗口可用宽度的 1/6,然后,为了让 form 元素内部的 input 元素保持合适的大小,我们再一次使用了 calc(),让它的宽度为其容器的宽度减 1em。

    input {
      padding: 2px;
      display: block;
      width: calc(100% - 1em);
    }
    
    #formbox {
      width: calc(100% / 6);
      border: 1px solid black;
      padding: 4px;
    }
    
    <form>
      <div id="formbox">
      <label>Type something:</label>
      <input type="text">
      </div>
    </form>
    

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

    .foo {
      --widthA: 100px;
      --widthB: calc(var(--widthA) / 2);
      --widthC: calc(var(--widthB) / 2);
      width: var(--widthC);
    }
    
    <!DOCTYPE html>
    <html lang="zh-cmn-hans">
    <head>
    <meta charset="utf-8"/>
    
    <style>
    .test{
    	width:calc(100%-50px);
    	background:#eee;
    }
    </style>
    </head>
    <body>
    <div class="test">我的宽度为100%-50px</div>
    </body>
    </html>

    效果图:

    上篇:px

    下篇:<percentage>