我們想要實(shí)現(xiàn)頁面自適應(yīng)布局時(shí),通常因?yàn)閙argin的存在,而比較麻煩;有時(shí)候想要實(shí)現(xiàn)寬度自適應(yīng)的輸入框時(shí),也因?yàn)閜adding或margin的存在,而相當(dāng)繁瑣,同時(shí)由于瀏覽器兼容性而導(dǎo)致最終效果不一致。css3新添加屬性box-sizing,在一定程度上解決了上面的問題,而在今天的文章中我們來通過css3新增加的另外一個(gè)屬性calc()來實(shí)現(xiàn)適應(yīng)布局。
calc()是css3新添加屬性,它可以讓你使用一個(gè)算術(shù)表達(dá)式來表達(dá)長(zhǎng)度值,這意味著可以用它來定義div的寬度,并設(shè)置margin、padding、border等。
calc()的運(yùn)算規(guī)則:
1.使用”+”、”-”、”*”、”/”四則運(yùn)算;
2.可以使用百分比、px、em、rem等單位;
3.可以混合使用各種單位進(jìn)行計(jì)算。
用法
calc()語法非常簡(jiǎn)單,就像我們小時(shí)候?qū)W加 (+)、減(-)、乘(*)、除(/)一樣,使用數(shù)學(xué)表達(dá)式來表示:
新聞熱點(diǎn)
疑難解答
圖片精選