在css3中,可以利用“/”運(yùn)算符設(shè)置calc()函數(shù)的除法運(yùn)算,該函數(shù)用于動(dòng)態(tài)計(jì)算長度值,參數(shù)可設(shè)置為一個(gè)數(shù)學(xué)表達(dá)式,結(jié)果將采用運(yùn)算后的返回值,語法為“長度屬性:calc(被除數(shù) / 除數(shù))”;在“/”運(yùn)算符的前后都要保留一個(gè)空格。
本教程操作環(huán)境:windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
css3中calc怎么設(shè)置除法
calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長度值。
需要注意的是,運(yùn)算符前后都需要保留一個(gè)空格,例如:width: calc(100% – 10px);
任何長度值都可以使用calc()函數(shù)進(jìn)行計(jì)算;
calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算;
calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則;
語法為:
calc(expression)
expression 必須,一個(gè)數(shù)學(xué)表達(dá)式,結(jié)果將采用運(yùn)算后的返回值。
示例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> input { padding: 2px; display: block; width: calc(100% - 1em); } #formbox { width: calc(100% / 6); border: 1px solid black; padding: 4px; } </style> </head> <body> <form> <div id="formbox"> <label>Type something:</label> <input type="text"> </div> </form> </body> </html>
輸出結(jié)果;
(學(xué)習(xí)視頻分享:css視頻教程)