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;
}      

 結果：

每天進步一點點。

拜托大家轉載的時候記得貼上我文章的連接配接，原創不容易，給條活路呗