浅析CSS 特性当中常常出現的百分比

2021-03-06 19:43 jianzhan
CSS 的特性值中常常会出現百分比,弄清它们的基数是1件很关键的事儿。我特地查询了1下 W3C 的 CSS2.1 规范,在此梳理下:

百分比企业

乘以包括块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width

乘以包括块的高宽比 top, bottom, height, max-height, min-height

有关包括块(containing block)的定义,不可以简易自然地理解成是父元素。假如是静态数据精准定位和相对性精准定位,包括块1般便是其父元素。可是针对肯定精准定位的元素,包括块应当是离它近期的 position 为 absolute、relative、或 fixed 的先祖元素。对固定不动精准定位的元素,它的包括块是视口(viewport)。实际能够参照 W3Help。

乘以元素的字体样式尺寸 line-height

乘以元素的行高 vertical-align

情况精准定位中的百分比 background-position 各自设定水平方位和竖直方位上的两个值,假如应用百分比,那末百分比值会另外运用于元素和图象。比如 50% 50% 会把照片的(50%, 50%)这1点与框的(50%, 50%)处对齐,非常于设定了 center center。同理 0% 0% 非常于 left top,100% 100% 非常于 right bottom。

字体样式尺寸中的百分比 font-size 中的百分比值应当乘以元素所承继到的字体样式尺寸,也便是父元素的字体样式尺寸。

别的字体样式企业 既然说到了字体样式尺寸,顺带818别的的字体样式企业吧,一些将会平常其实不会用,可是掌握1下也沒有弊端。有两个相对性企业是:

em——非常于当今的字体样式高宽比,称作“全身上下方框”(em square)。假如在 font-size 上应用这个企业,应当乘以父元素的字体样式尺寸。用在 font-size 以外的特性上,则应当乘以元素本身的字体样式尺寸。 ex——非常于字体样式中的”x”的高宽比。 下列是肯定企业:

in——英寸(inch),非常于 2.54cm。 cm——厘米(centimeter)。 mm——毫米(millimeter)。 pt——磅(point)。1pt 非常于 1in 的 1/72。 pc——皮卡(pica)。1pc = 12pt。 px——像素(pixel unit)。1px = 0.75pt。

百分比的承继

假如某个元素设定了百分比的特性,则子孙后代元素承继的是测算后的值。比如:

拷贝编码
编码以下:

p { font-size: 10px } p { line-height: 120% } / 120% of 'font-size' / 那末p的子元素承继到的值是 line-height: 12px,而并不是 line-height: 120%。