mozilla
您的搜索结果

    calc

    这是一个实验中的功能
    此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

    概述

    CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状.

    你还可以在一个calc()内部嵌套另一个calc().

    语法

    calc(expression)

    expression
    一个数学表达式,该表达式的结果会作为最终的<length>.

    表达式

    该表达式中可以使用下面的几个运算符连接任意的简单表达式:

    +
    加法
    -
    减法
    *
    乘法
    /
    除法.

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

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

    例子

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

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

    .banner {
      position:absolute;
      left: 40px;
      width: 90%;                       /* fallback for browsers without support for calc() */
      width: -webkit-calc(100% - 80px);  /* WebKit 536.3 (Chrome 19) and above, experimental */
      width:         calc(100% - 80px);  /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */
      border: solid black 1px;
      box-shadow: 1px 2px;
      background-color: yellow;
      padding: 6px;
      text-align: center;
    }
    
    查看示例 FIXME: -webkit-

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

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

    看一下下面的CSS:

    input {
      padding: 2px;
      display: block;
      width:  98%;                      /* fallback for browsers without support for calc() */
      width: -webkit-calc(100% - 1em);  /* WebKit 536.3 (Chrome 19) and above, experimental */
      width:         calc(100% - 1em);  /* final CSS3 compliant implementation; IE 9 and above */
    }
    
    #formbox {
      width:  130px;                 /* fallback for browsers without support for calc() */
      width:    -moz-calc(100% / 6);   /* Gecko 2.0 (Firefox 4) and above, experimental, will be dropped */
      width: -webkit-calc(100% / 6);   /* WebKit 536.3 (Chrome 19) and above, experimental */
      width:         calc(100% / 6);   /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */
      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>
    
    查看示例 FIXME: -webkit-

    规范

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

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 19 (WebKit 536.3) -webkit 4.0 (2) -moz
    16 (16)
    9 - 6 -webkit (buggy)
    On gradients' color stops 19 (WebKit 536.3) -webkit 19 (19) 9 - 6 -webkit (buggy)
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? 4.0 (2) -moz
    16.0 (16)
    ? ? ?
    On gradients' color stops ? 19.0 (19) ? ? ?

    相关链接

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, cuixiping, teoli
    最后编辑者: cuixiping,