calc()是css3的一個新增的功能，用來指定元素的長度，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性動態的設置值。

calc()語法

.element {

width：calc(expression);

}

calc()的運算法則

使用 "+"、"-"、"*" 和 "/" 運算

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

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

表達式中有 "+" 和 "-" 時，其前后必須有空格。

表達式中有 "*" 和 "/" 時，其前后可以沒有空格，但建議保留

瀏覽器的兼容性

在IE9+、FF4.0+、Chrome19+、Safari6+都得到了較好的支持，使用時同樣在其前面加上各瀏覽器廠商的識別符前綴

.element {

-moz-calc(expression);

-webkit-calc(expression);

-o-calc(expression);

-ms-calc(expression);

calc(expression);

}

應用

眾所周知，如果元素的寬度為100%時，其自身不帶其它盒模型屬性設置還好，如果有別的類似margin、padding或border的屬性設置，那將導致盒子被撐破。為了解決撐破容器的問題，以前我們只能計算div.box的寬度，用容器的寬度減去padding和border的值 ，但有時候我們苦于不知道元素的總寬度，比如說是自適應布局，只知道一個百分比值，但其它的值又是*px之類的值，這就比較難解決了。隨著css3的出現，其中利用box-sizing來改變元素的盒模型以達到最終想要的效果，但是calc()解決此問題更加方便。

body {

background: #E8EADD;

color: #3C323A;

padding: 20px;

}

.wrapper {

width: 1024px;

width: -moz-calc(100% - 40px);

width: -webkit-calc(100% - 40px);

width: calc(100% - 40px);

margin: auto;

}

#header {

background: #f60;

padding: 20px;

width: cal(100% - 20px * 2);

}

#main {

border: 8px solid #B8C172;

float: left;

margin-bottom: 20px;

margin-right: 20px;

padding: 20px;

box-sizing: border-box;

width: 75%;

/*

width: 704px;

width: -moz-calc(75% - 20px * 2 - 8px * 2);

width: -webkit-calc(75% - 20px * 2 - 8px * 2);

width: calc(75% - 20px * 2 - 8px * 2);*/

}

#accessory {

border: 8px solid #B8C172;

float: right;

padding: 10px;

box-sizing: border-box;

width: calc(25% - 20px);

/*

width: 208px;

width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);

width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);

width: calc(25% - 10px * 2 - 8px * 2 - 20px);*/

}

#footer {

clear: both;

background: #000;

padding: 20px;

color: #fff;

width: cal(100% - 20px * 2);

}

CSS3 calc()

test……

test……

• test1……

• test2……

• test3……

footer

總結

以上是生活随笔為你收集整理的cal css,CSS calc计算属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。