css 3計算属性calc()

.elm { 
    width: calc(expression); 
}

 
注意事項:

は「+」、「-」、「*」、「/」の4つの演算を使用します.

は、パーセンテージ、px、em、remなどの単位を使用することができる.

は、様々な単位を混合して計算することができる.

式に「+」と「-」がある場合、その前後にスペースが必要です.例えば、「widht:calc(12%+5 em)」というスペースのない書き方は間違っています.

式に「*」と「/」がある場合は、前後にスペースはありませんが、スペースを残すことをお勧めします.

 
互換性の書き方:

.elm {
    /*Firefox*/
    -moz-calc(expressin);
    /*chrome safari*/
    -webkit-calc(expression);
    /*Standard */
    calc();
}

 
 
例:

.box { 
    background: #f60; 
    height: 50px; 
    padding: 10px;
    border: 5px solid green;
    width: 90%; /*     calc()    */ 
    width: -moz-calc(100% - (10px + 5px) * 2); 
    width: -webkit-calc(100% - (10px + 5px) * 2); 
    width: calc(100% - (10px + 5px) * 2); 
}