一篇文章带你了解CSS单位相关知识

一、了解 CSS 单位

测量长度的单位可以是绝对的，例如像素，点等，也可以是相对的，例如百分比（％）和 em 单位。

指定 CSS 单位对于非零值是必须的，因为没有默认单位。丢失或忽略单位将被视为错误。但是，如果该值为 0，则可以省略该单位（毕竟，零像素与零英寸是一样的）。

注意： 长度是指距离测量。长度包括数字值，后面加单位，比如 10px、2em、50％ 等。数字和单位之间不能出现空白。

二、相对长度单位

相对长度单位指定相对于另一个长度属性的长度。相对单位是 描述 ：em当前的字体大小 。

ex ：当前字体的 x 高度 。

em 和 ex 单位取决于套用至元素的字体大小。

1． 使用 em 单位

em 的值等于使用它的元素的 font－size 属性的计算值。它可用于垂直或水平测量。

例如，如果 font－size 元素设置为 16px，并且 line－height 设置为 2．5em，则 line－height像素计算值为：2．5?x?16px?＝?40px。

P ｛    font－size： 16px；    line－height： 2．5em；｝

运行效果

当在 font－size 属性本身的值中指定 em 时会发生异常，在这种情况下，它引用父元素的字体大小。

因此，当我们用 em 指定字体大小时，1em 继承自 font－size。因此， font－size： 1．2em； 使文本比父元素的文本大 1．2 倍。

＜html＞    ＜head＞        ＜meta charset＝＂utf－8＂＞        ＜meta name＝＂viewport＂ content＝＂width＝640， user－scalable＝no＂＞        ＜title＞平安保险＜／title＞        ＜link rel＝＂stylesheet＂ type＝＂text／css＂ href＝＂css／fy．css＂ ／＞    ＜／head＞
   ＜body＞        ＜meta http－equiv＝＂Content－Type＂ content＝＂text／html； charset＝utf－8＂ ／＞        ＜title＞项目＜／title＞        ＜style＞            body ｛                font－size： 62．5％；                font－family： Arial， Helvetica， sans－serif；            ｝
           p ｛                font－size： 1．6em；            ｝
           p：firt－letter ｛                font－size： 3em；                font－weight： bold；            ｝＜／style＞
       ＜body style＝＂text－align： center； background－color： aquamarine；＂＞            ＜div＞ddad＜／div＞            ＜p＞ Hellow world＜／p＞        ＜／body＞
＜／html＞

代码解析：浏览器中字体的默认大小为 16px。我们的第一步是通过将主体设置 font－size 为 62．5％ 来减小整个文档的大小，这会将字体大小重置为 10px（16px 的 62．5％）。

这是默认 font－size的四舍五入，方便 px 到 em的转换。

2． 使用 ex 单位

ex 单位等于当前字体的 x 高度。

所谓的 x 高度是因为它通常等于小写 x 的高度，如下所示。但是， ex 即使对于不包含 x 的字体，也会定义的。

P ｛    font－size： 16ex；    line－height： 2．5em；｝