Home > Article > Web Front-end > 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!