當(dāng)混合單位時(shí),一個(gè)新的值函數(shù)可以消除像深圳網(wǎng)站建設(shè)頁面中上一篇所提及的所有問題.這個(gè)函數(shù)被稱為calc(),有了它,就可以在進(jìn)行簡單計(jì)算時(shí)使用任何數(shù)計(jì)數(shù)的長度單位,其最簡單的形式是,提供給函數(shù)的參數(shù)為兩個(gè)數(shù)字和一個(gè)數(shù)學(xué)運(yùn)算符:
E{height:calc(10px+10px);}
為了興一個(gè)更實(shí)際的例來說明其性能,本節(jié)現(xiàn)次回顧前文中那個(gè)含有三個(gè)欄的示例.如果想要將中間欄左右兩側(cè)的邊界寬度設(shè)置為4px,而將填充和頁邊距分別設(shè)置為10px和20px,則可以像之前一樣使用box-sizing來設(shè)置邊界和填充,但本例還使用calc()函數(shù)將頁邊距的寬度從總寬度中減去;
F{
border:4px solid black;
border-width:0 4px;
box-sizing:border-box;
margin:0 20px;
padding:0 10px;
width:calc(50% - 40px);
}
還可以用calc值代替box-sizing來設(shè)置寬度,甚至通過使用不同的長度單位來混合這些值,下面的救命對(duì)頁邊距使用了em單位,并在將邊界,填充和邊距從總寬度中減去之前,使用一個(gè)calc()函數(shù)來計(jì)算它們的相對(duì)寬度;
F{
border:4px solid black;
border-width:0 4px;
margin:0 20px;
padding:0 1em;
width:calc(50% - calc(48px+2em));
}
但是,calc()不僅可以被用于width或height屬性,還可以被用于任何允許使用長度值的屬性和函數(shù).