CSS3中的em作為相對單位,我們經常會用到它來定義元素的字體大小或者其他屬性。那么em具體是怎么工作的呢?
/* 定義1em的大小為16像素 */ html {font-size: 16px;} /* 定義p標簽的字體大小為1.5em */ p {font-size: 1.5em;}
在上面的代碼中,我們將html元素的字體大小設定為16像素。這是我們在設計網頁時經常使用的一個技巧,將html元素的字體大小設定為一個固定的值,同時其他元素的字體大小使用em單位來定義,這樣可以方便地進行比例和縮放。
在定義p標簽的字體大小時,我們使用了1.5em。這個數字的意思是,p標簽的字體大小將會是html元素字體大小的1.5倍,也就是24像素(16 * 1.5)。如果我們在其他地方再使用em單位,其實也是在定義相對于其父元素的字體大小。
/* 定義a標簽的字體大小為0.8em */ a {font-size: 0.8em;} /* 定義span標簽的字體大小為0.5em */ span {font-size: 0.5em;}
上面的代碼中,我們使用了0.8em和0.5em兩個數字來定義a和span標簽的字體大小。由于這兩個標簽的父元素是不同的,它們在瀏覽器中呈現的字體大小也會不同。如果我們在父元素中多次使用了em單位來定義字體大小,那么這些字體大小也可以相對于自身進行縮放。
總之,通過使用em單位來定義CSS的屬性,我們可以更加簡單地設定元素的大小和比例,同時也可以進行方便的縮放和調整。
下一篇css3中文字居中條件