Css-calc()翻车归纳

在Css3中引入了一个非常有用的功能，就是calc()函数。

在它的括号内是一个 ‘表达式’ 。语法如下:

calc(expression)

在详细的介绍它之前,我们先清楚以下概念。

　　1. 运算符 : 加('+')、减('-')、 乘('*')、 除('/')。

　　2. ‘表达式’就是我们常说的算数式子(一般为等号的左边),例如: 1+2 、6/2 、4*2 ...

　　3. 参数：函数括号内的内容称为参数(又称形参)。

Css3中的calc()函数主要作用是来帮助我们计算一些 不容易得出的值。calc()会返回其参数的结果，也就是表达式的结果。再在页面渲染。

    1. 它的第一特色就是可以计算 不同单位 的值。

.box{
  100px;
  height:200px;
  border:1px solid #000;
}
.chlid{
  100%;
  height:100%;
  padding-left:2px;
  margin-left:calc(100% - 2px);
  border:1px solid #000;
}


<div class="box">
  <div class="child"></div>
</div>

　　2. 它的第二特色就是可以嵌套--所有嵌套的 'calc()' 都会转化为 '()' 

calc( calc(100% - 20px) - 2px ) 等同于 calc( (100% - 20px) - 2px )

----------------------------------------  容易出错的点 -------------------------------------　

　　1. calc()的‘+’、‘-’运算符 两边必须 空格--‘/’和‘*’没有这个规定，但是为了统一规范，都会留出空格。

calc(20px - 4%)
calc(1px + 2em)

　　2. 当使用calc()函数的元素 的 父元素是body时，‘margin-top:calc()’ 会出现异常。

body,html{
 100%;
 height:100%;
 padding:0;
 margin:0;
}
.box{
  40px;
  height:40px;
  margin-top:calc(100% - 20px);
  margin-left:calc(100% - 20px);
  border:1px solid #000;
}

<div class="box"></div>

上述代码原是为了使div.box垂直水平居中，但是实际上页面会出现上下的滚动条,原因是此时 margin-top中的100% 是与 页面宽度相等(100%) 的。