调整字号

CSS 属性值中的百分比

CSS 中经常会出现百分比单位,搞清它们的基数是件很重要的事情。我查了查 CSS2.1 标准,在此整理一下:

百分比的基数

乘以包含块的宽度

margin, padding, left, right, text-indent, width, max-width, min-width

乘以包含块的高度

top, bottom, height, max-height, min-height

对于包含块(containing block)这个概念,不能简单理解成就是父元素。分情况而言:如果元素为静态定位或者相对定位,包含块一般就是其父元素;但如果元素是绝对定位,包含块应该是离它最近的 position 为 absoluterelative、或者 fixed 的祖先元素。对固定定位的元素,它的包含块是视口(viewport)。具体可以参考 这篇文章

乘以元素的字体大小

line-height

乘以元素的行高

vertical-align

background-position 里的百分比

background-position 分别设置水平方向和垂直方向上的两个值,如果使用百分比,那么这个位移会同时应用于元素和图像。例如 background-position: 50% 50% 会把图片的(50%, 50%)这一点与元素区域的(50%, 50%)对齐,相当于设置了 background-position: center center。同理 background-position: 100% 100% 相当于 background-position: right bottom。如果只设置一个值,那另一个值自动设为 50%。

font-size 里的百分比

font-size 中的百分比值应该乘以元素继承的字体大小,也就是父元素的字体大小。

其他字体单位

顺便理一理其他的字体单位吧,有些虽然不太常用,但可以了解。有两个相对单位是:

  • em——等于当前的字体大小。如果在 font-size 上使用这个单位,则基数是父元素的字体大小。用在 font-size 之外的属性上,则乘以元素自身的字体大小。
  • ex——相当于字体中的”x”的高度。

以下都是绝对单位:

  • in——英寸(inch),相当于 2.54cm
  • cm——厘米(centimeter)。
  • mm——毫米(millimeter)。
  • pt——点(point)。1pt 相当于 1in 的 1/72。在分辨率为 72 dpi 的操作系统上,1px 就是 1pt。
  • pc——皮卡(pica)。1pc = 12pt
  • px——像素(pixel unit)。如果系统设置分辨率为 96 dpi,那么 1px = 0.75pt

百分比的继承

如果某个元素设置了百分比的属性,那么子元素继承的是计算后的值。例如:

p { font-size: 10px }
p { line-height: 120% } /* 120% of 'font-size' */

那么 <p> 的子元素继承到的值是 line-height: 12px,而不是 line-height: 120%

还没有评论,沙发空缺中……
上一篇
«
下一篇
»
flight