初識calc()

在使用calc（）之前，我也只是聽說有這麼一個東西，但在用過之後我才發現這個功能其實很實用。

calc()其實就是英文calculate(計算)的縮寫，它看起來像個函式吧？

其實不是，calc()是css3中的一個屬性

什麼是calc()？

使用calc()我們可以動態的來指定元素的長度，我們可以用它給元素的border、margin、pading、font-size和width等屬性設定動態值。
為何它是動態的？因為它是通過計算來決定屬性的長度的。

就像它全稱calculate(計算)所說的，就是加 （+）、減（-）、乘（*）、除（/）。

怎麼寫？我舉個例子：

.box {
  width: calc(100%-10px); }

這樣的話類名為box的類標籤，它的寬度就是父元素寬度的100%減去10px，這是一個動態的屬性。

 我是在工作中遇到這個問題的，情況是這樣：

　　html:

　　　　<div class="box">

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

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

　　　　</div>

　　css:

　　　　.box{

　　　　　　　　width:100px;

　　　　　　　　height:200px;

　　　　　　}

　　　　.box-left{

　　　　　　　　　　width:50%;

　　　　　　　　　　height:100%;

　　　　　　　　　　border-right:1px solid black;

　　　　　　　　}

　　　　.box-right{

　　　　　　　　　　width:50%;

　　　　　　　　　　height:100%;

　　　　　　　　}

一個div中有左右兩個div，但是兩個div中有一條中線，我想一般都是用border解決吧！但是因為div的寬度各佔50%，在添加了borer之後，兩個div的總寬度為50%+50%+1px=100%+1px。

我們的總寬度超過父元素的總寬度了QAQ！所以.div-right被無情的擠了下來。

我們來用calc()把.box-right放上去吧！程式碼如下：

　　　　.box-left{

　　　　　　　　　　width:calc(50% - 1px);

　　　　　　　　　　height:100%;

　　　　　　　　　　border-right:1px solid black;

　　　　　　　　}

這樣我們就把兩個div放進.box了，並且中間成功的放進了一條分割線。╰(*´︶`*)╯

 在使用的過程中有一些注意事項：

1、運算子號的左右兩邊要有空格分開，如calc(50% - 1px);

　  乘號和除號可以不要加空格，但是建議加上比較好。

2、考慮到相容問題，我們還可以加上這些：

 　　width:-moz-calc(40% - 1px); 
　　 width:-webkit-calc(40% - 1px); 
　　 width:calc(40% - 1px);