在CSS中,有一種很有意思的長度單位叫做em。它的意思是指相對于當前元素的字體大小來計算長度。
一般來說,我們會用像素(px)、百分比(%)或者點(pt)等單位來設定元素的大小。但是,用em也能達到同樣的效果,而且有時候更加有用。
比如,你想讓一個字體的大小是另一個字體大小的兩倍。使用em就可以輕松實現。
.big {
font-size: 2em;
}
.small {
font-size: 1em;
}
在這個例子中,.big的字體大小是相對于父元素的字體大小而言的。如果想要更準確的控制字體大小,可以在body中定義一個字體大小,然后使用em單位。
body {
font-size: 16px;
}
.big {
font-size: 2em;
}
.small {
font-size: 1em;
}
在這個例子中,body的字體大小為16px,那么.big的字體大小就是32px,.small的字體大小就是16px。
需要注意的是,使用em時要注意嵌套層級的關系。如果一個元素的字體大小是通過另一個元素繼承來的,那么em單位就會跟著繼承的字體大小一起變化。
.big {
font-size: 2em;
}
.small {
font-size: 0.5em;
}
在這個例子中,.small的字體大小等于父元素的字體大小的一半,也就是2em的一半,即1em。
總結一下,em單位是相對于當前元素的字體大小來計算長度的。使用em單位可以讓元素的大小更加靈活和易于控制。但是在使用em時需要注意嵌套層級的關系,以避免出現意外的效果。
上一篇css fade 動畫
下一篇css f0c9