html5中的長度值動態計算
作者：佚名 時間：2014-06-10 分享到：
當混合單位時,一個新的值函數可以消除像上海網站建設頁面中上一篇所提及的所有問題.這個函數被稱為calc(),有了它,就可以在進行簡單計算時使用任何數計數的長度單位,其最簡單的形式是,提供給函數的參數為兩個數字和一個數學運算符:
e{height:calc(10px+10px);}
為了興一個更實際的例來說明其性能,本節現次回顧前文中那個含有三個欄的示例.如果想要將中間欄左右兩側的邊界寬度設置為4px,而將填充和頁邊距分別設置為10px和20px,則可以像之前一樣使用box-sizing來設置邊界和填充,但本例還使用calc()函數將頁邊距的寬度從總寬度中減去;
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來設置寬度,甚至通過使用不同的長度單位來混合這些值,下面的救命對頁邊距使用了em單位,并在將邊界,填充和邊距從總寬度中減去之前,使用一個calc()函數來計算它們的相對寬度;
f{
border:4px solid black;
border-width:0 4px;
margin:0 20px;
padding:0 1em;
width:calc(50% - calc(48px+2em));
}
但是,calc()不僅可以被用于width或height屬性,還可以被用于任何允許使用長度值的屬性和函數.
如沒特殊注明，文章均為上海聯楷網絡原創,轉載請注明來自：http://www.ktcbnqb.cn/help/20151126/n1804.html
