CSS中的單位
絕對單位
in-英寸;
cm;
mm;
pt-磅
相對單位
em-與元素字號掛鉤;
rem-與根元素字號掛鉤;
px-與css像素掛鉤
%-另一屬性值的百分比
CSS中可以取百分比的屬性
定位:top, right, bottom, left
盒模型:width,height, margin,padding
背景:backgroug-position, backgroud-size
文本:text-indent
字體:font-size
百分比是如何計(jì)算的
百分比的計(jì)算是相對一個基數(shù)的,這個基數(shù)與當(dāng)前元素的包含塊有關(guān)。
基于包含塊的寬度來計(jì)算的屬性:margin, padding, width, max-width,min-width, left, right, text-indent.
基于包含塊的高度來計(jì)算的屬性:top,bottom,height,max-height,min-height
基于當(dāng)前字體大小來計(jì)算的屬性:line-height
基于line-height來計(jì)算的屬性:vertical-align
基于元素本身的寬高:background-position:背景圖像的位置,分別設(shè)置水平方向和垂直方向上的兩個值,如果使用百分比,那么百分比值會同時應(yīng)用于元素和圖像。例如 50% 50% 會把圖片的(50%, 50%)這一點(diǎn)與框的(50%, 50%)處對齊,相當(dāng)于設(shè)置了 center center。同理 0% 0% 相當(dāng)于 left top,100% 100% 相當(dāng)于 right bottom
基于元素本身的寬度:background-size但此值只能應(yīng)用在塊元素上,所設(shè)置百分值將使用背景圖片大小根據(jù)所在元素的寬度的百分比來計(jì)算
推薦教程:《CSS教程》