CSS3 cal屬性

#on{
  display:block;
  margin:0 auto;
  margin:calc(50vh-250px)auto;
     }

　　

在網上查找和學習了一下，才知道這是CSS3的一個新增功能，用來指定元素的長度，比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。

 

calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。

 

calc()的運算規則

 

calc()使用通用的數學運算規則，但是也提供更智能的功能：

 

使用“+”、“-”、“*” 和 “/”四則運算； 

可以使用百分比、px、em、rem等單位； 

可以混合使用各種單位進行計算； 

表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的； 

表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。

 

瀏覽器支持

firefox 4.0+已經開支支持calc()功能，不過要使用-moz-calc()私有屬性，chrome從19 dev版，也開始支持私有的-webkit-calc()寫法，IE9這次則牛逼了一次，原生支持標准的不帶前綴的寫法了。

 

原文鏈接：http://caibaojian.com/calc.html

calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。原文來自：http://caibaojian.com/calc.html

以前我們可以使用box-sizing:border-box;來設置盒子的屬性為不加上邊距。現在我們又多了一個選擇了。但要注意，兩者只能使用一個哦，否則就會造成沖突了。

原文鏈接：http://caibaojian.com/calc.html

怎么使用

calc()可以使用數學運算中的簡單加（+）、減（-）、乘（*）和除（/）來解決問題，而且還可以根據單位如px,em,rem和百分比來轉化計算。原文來自：http://caibaojian.com/calc.html

比如三局平均分布的布局，中間間距為5像素。

*{margin: 0; padding: 0;}
.col-3{width: calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;}
.col-3:nth-child(3){margin-right: 0;}
</style>

　　

瀏覽器兼容性