css3 calc()的用法

說明：calc（四則運算）；任何長度值都可以使用calc()函數進行計算；和平時的加減乘除優先順序一樣一樣的；

特別注意：calc（）里面的運算符必須前后都留一個空格，不然瀏覽器識別不了，比如：calc(100% - 5px);

兼容性：

HTML:

<div class="out">
　　　　<div class="in">in</div>
</div>

CSS：

.out{
　　　　width: 200px;
　　　　height: 200px;
　　　　background: red;
　　　　padding: 10px;    
　　　　margin: 40px auto;
　　}
.in{
　　　　width: 100%;
　　　　height: 100%;
　　　　background: skyblue;
　　　　padding: 20px 10% 12% 30px;
　　}

結果：

這個時候out被撐破了怎么辦呢，padding百分比不好計算啊。。。css3的calc()屬性就幫了大忙了。

重新設置in的css屬性：

.in{
　　width: calc(100% - 30px - 10%);
　　width: -webkit-calc(100% - 30px - 10%);
　　width: -moz-calc(100% - 30px - 10%);

　　height: calc(100% - 20px - 12%);
　　height: -webkit-calc(100% - 20px - 12%);
　　height: -moz-calc(100% - 20px - 12%);

　　background: skyblue;
　　padding: 20px 10% 12% 30px;
}

 結果：