CSS calc()函数

• 

  定义和用法

  calc()函数执行计算以用作属性值。

  特征	说明
  CSS版本	CSS3

• 

  浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

  函数	IE/Edge	Chrome	FireFox	Safari	Opera
  函数名称
  calc()	9.0	26.0 19.0 -webkit-	16.0 4.0 -moz-	7.0 6.0 -webkit-	15.0

• 

  CSS语法

  calc(expression)
  

  值	描述
  expression	必需的。 数学表达式。 结果将用作值。可以使用以下运算符：+ - * /

• 

  实例

  使用calc()计算<div>元素的宽度：

  #div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
  }
  

  尝试一下