标签归档:W3C

CSS相关细节

最近在跟踪CSS处理相关的BUG,betway体育 发现CSS很多细节还不清楚,参阅了https://www.w3school.com.cn,了解了一些之前都未接触过的CSS用法,特记录下来,供今后参阅。

CSS 单位

尺寸

单位描述
%百分比
in英寸
cm厘米
mm毫米
em

1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

例如,如果某元素以 12pt 显示,那么 2em 是24pt。

在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。

ex一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt磅 (1 pt 等于 1/72 英寸)
pc12 点活字 (1 pc 等于 12 点)
px像素 (计算机屏幕上的一个点)
其中ex是一个非常令人迷惑的单位,看看W3C的CSS 2.1是如何说的:

The ‘ex’ unit is defined by the element’s first available font. The exception is when ‘ex’ occurs in the value of the ‘font-size’ property, in which case it refers to the ‘ex’ of the parent element.

The ‘x-height’ is so called because it is often equal to the height of the lowercase “x”. However, an ‘ex’ is defined even for fonts that do not contain an “x”.

The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase “o” extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em should be used.

简单说来,就是等于小写字母”x”的高度,更简单的处理是1ex=0.5em.

颜色

单位描述
(颜色名)颜色名称 (比如 red)
rgb(x,x,x)RGB 值 (比如 rgb(255,0,0))
rgb(x%, x%, x%)RGB 百分比值 (比如 rgb(100%,0%,0%))
#rrggbb十六进制数 (比如 #ff0000)