Css3 calc可使用簡單的數學運算計算寬度，css3calc

Css3 calc可使用簡單的數學運算計算寬度，css3calc

calc是單詞calculate的縮寫,是Css3的一個新的長度單位函數,可以使用簡單的數學運算.

Firefox要使用-moz-calc()私人屬性,

Chrome要使用-webkit-calc()私人屬性,

IE9原生支援標準的不帶首碼的寫法,

Opera暫還不支援.

運算規則

可以使用 “+” “-” “*” “/” 四則運算(”+”、”-”兩個符號邊上必須要有空格，而”*”、”/”符號則不是必須的),

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

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

.content {    border:1px solid #000;    /* ‘+’ ‘-’ 符號左右兩邊加空格 */    width:calc(100% - 2px);}.content2 {    /* ‘+’ ‘-’ 符號左右兩邊加空格 */    width:calc(10em + 10px);}/*三欄等寬布局*/.content3 {    margin-left:20px;    /* ‘+’ ‘-’ 符號左右兩邊加空格, ‘*’ ‘/’ 符號可不加 */    width:calc(100%/3 - 20px);}/* n為從0開始的乘數,依次遞增1,如:3*0,3*1,3*2等相乘結果後的子項目 */.content3:nth-child(3n){    margin-left:0;}