CSS中的1ex是一個相對單位,它等于當前字體下字母x的高度。舉個例子,假設我們的字體大小為16px,那么1ex則等于16px * x的高度。這就意味著,如果我們使用1ex作為寬度或高度值,它將根據當前字體大小的變化而變化。
在許多情況下,1ex比像素(px)更有用,特別是在我們需要進行自適應布局時。事實上,1ex通常被用于垂直對齊元素。例如,我們可以使用line-height和vertical-align屬性將兩個行內元素垂直居中:
<div style="font-size: 16px;"><p style="height: 1ex; background-color: red; display: inline-block; vertical-align: middle;"></p><p style="line-height: 1ex; background-color: grey; display: inline-block; vertical-align: middle;">This is some text </p></div>
在上面的代碼中,我們首先創建了一個高度為1ex的紅色方塊,然后創建了一個具有相同行高的文本段落,它被垂直居中到了方塊中。如果我們將div的字體大小更改為24px,那么1ex的高度也將隨之改變。
總體而言,1ex雖然不經常使用,但在某些情況下它是非常有用的,尤其是在需要創建自適應布局或垂直對齊元素時。
上一篇css 1.5倍行距
下一篇Css當時時間作為版本號