css cal()与弹性布局

弹性布局 类似bootstrap 的网格布局中
每个盒子都有自己的百分比

1. 假设一个div class="demo" 中有一个div class="box"的盒子，当.box的盒子的width=100%，如果添加了padding或者margin就会挤破父盒子.demo，为了避免这种情况我们要降多余的padding或者margin给减掉
   但是我们的宽度是不确定的，是一个变量。这时我们就可以用到cal()这个css的方法啦
2. cal()在这个方法中style属性可以进行简单的数字计算
   好比.box设置了一个5px的padding，那么.box的真正宽度应该是
   width: calc(100% - ( 5px) * 2);
   如果有margin的话，将多余的margin减掉即可

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com