CSS size as a percentage

Units in CSS

Absolute units

in-inch;

cm;

mm;

pt-pound

relative unit

em-linked to the element font size;

rem - linked to the font size of the root element;

px - linked to the css pixel

% - the percentage of another attribute value

Can be used in CSS Get the percentage attributes

Positioning: top, right, bottom, left

Box model: width, height, margin, padding

Background: backgroug-position, backgroud-size

Text: text-indent

Font: font-size

How the percentage is calculated

Percentage The calculation is relative to a base relative to the containing block of the current element.

Attributes calculated based on the width of the containing block: margin, padding, width, max-width,min-width, left, right, text-indent.

Based on the height of the containing block Calculated properties: top, bottom, height, max-height, min-height

Properties calculated based on the current font size: line-height

Properties calculated based on line-height: vertical-align

Based on the width and height of the element itself: background-position: the position of the background image, set two values ​​​​in the horizontal direction and the vertical direction respectively. If percentage is used, the percentage value will be applied to the element at the same time. and images. For example, 50% 50% will align the (50%, 50%) point of the picture with the (50%, 50%) point of the frame, which is equivalent to setting the center center. In the same way, 0% 0% is equivalent to left top, 100% 100% is equivalent to right bottom

Based on the width of the element itself: background-size, but this value can only be applied to block elements, the set percentage value The size of the background image will be calculated based on the percentage of the width of the element where it is located

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of CSS size as a percentage. For more information, please follow other related articles on the PHP Chinese website!