Is % the unit of css3?

"%" is the unit in CSS3. "%" refers to percentage and is a relative length unit; all attributes that accept length values ​​can use the percentage unit, but different attributes have different effects when using this unit. , there needs to be a reference value, that is, the value is determined relative to the height, width or font size of the containing block. The syntax is "element {length value attribute: percentage value %}".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

Units of css3

CSS %--Percent

Percent (%) is also one of our more commonly used units. All attributes that accept length values ​​can use the percentage unit. . However, the effect of using this unit with different attributes may be different. But they all need to have a reference value, which means that the percentage value is a relative value.

Percentage is a relative length unit, which is measured relative to the height and width or font size of the containing block.

The concept of containing block cannot simply be understood as the parent element.

If it is static positioning and relative positioning, the containing block is generally its parent element.

If it is an absolutely positioned element, the containing block should be the nearest ancestor element whose position is a non-static attribute.

If it is a fixed-positioned element, its containing block is the viewport.

Inheritance of percentage

If an element sets the percentage attribute, the descendant elements inherit the calculated value. For example:

p { font-size: 10px;line-height: 120%; }

Then the value inherited by the sub-element of p is line-height: 12px, not line-height: 120%.

(Learning video sharing: css video tutorial, html video tutorial)

The above is the detailed content of Is % the unit of css3?. For more information, please follow other related articles on the PHP Chinese website!