css3 calc()的用法 css3 calc()的用法

轉載自：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; }

 結果：