Different parameters for percentages in CSS

Multiply the width of the containing block

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

Multiply the height of the containing block

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

The concept of a containment block (containing block) cannot be simply understood to be a parent element. In the case of static positioning and relative positioning, the containing block is generally its parent element. But for an absolutely positioned element, the containing block should be the ancestor of the nearest position, absolute relative or, or fixed . For a fixed positioned element, its containing block is a viewport (viewport). Refer to W3help for details.

Multiply the font size of an element

line-height

Multiply the row height of the element

vertical-align

Percentage in background positioning

background-positionSet two values horizontally and vertically, respectively, and if you use percentages, the percent value is applied to both the element and the image. For example, the 50% 50% picture (50%, 50%) is aligned with the box (50%, 50%), which is equivalent to setting it center center . 0% 0% left top in the same vein, equivalent to 100% 100% right bottom .

Percent in font size

font-sizeThe percent value in should be multiplied by the font size that the element inherits from, that is, the parent element's font size.

Other font units

Now that the font size, by the way 818 other font units, some may not normally use, but there is no harm to understand. There are two relative units:

• em-equivalent to the current font height, called the "Full Body box" (em square). If font-size This unit is used on, it should be multiplied by the parent element's font size. font-sizeon attributes that are not used, you should multiply the font size of the element itself.
• ex-equivalent to the height of the "x" in the font.

The following are absolute units:

• in-inches (inch), equivalent 2.54cm .
• cm--CM (centimeter).
• mm--mm (millimeter).
• pt--pound (point). 1ptequivalent 1in of 1/72.
• pc--Pickup (PICA). 1pc= 12pt .
• px--pixel (pixel unit). 1px= 0.75pt .

If an element has a percentage attribute set, the descendant element inherits the computed value. For example:

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

Then the child element of P inherits to the value line-height: 12px that is, instead of line-height: 120% .

Different parameters for percentages in CSS