CSS Percentage Calculation Method
Category Programming Techniques
CSS supports various unit formats, such as percentages, px, pt, rem, etc. Percentages and px are commonly used units, and with the popularity of mobile and responsive design, rem, vh, and vw are also widely used.
Today, I encountered two questions about percentage calculations in the SegmentFault community. One is about the calculation of percentages when used in translate, which DOM element's size is it relative to; the other is how percentages are converted to px when used in padding, margin, etc.
For the first, the movement distance is calculated based on the size of its own element:
>
[The percentage] refers to the size of the element's box
For example: Center an element horizontally and vertically without knowing the element's width and height
Create a div with the class name wrapper and set its style
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
For the second, I think the conversion of percentage to px should be completed by the browser according to CSS specifications, but how exactly is it calculated?
Example 1: Margins
<div style="width: 20px">
<div id="temp1" style="margin-top: 50%">Test top</div>
<div id="temp2" style="margin-right: 25%">Test right</div>
<div id="temp3" style="margin-bottom: 75%">Test bottom</div>
<div id="temp4" style="margin-left: 100%">Test left</div>
</div>
The offsets obtained are as follows:
temp1.marginTop = 20px * 50% = 10px;
temp2.marginRight = 20px * 25% = 5px;
temp3.marginBottom = 20px * 75% = 15px;
temp4.marginLeft = 20px * 100% = 20px;
Then, I also tested padding. I originally thought that the value of padding would be calculated based on the element to which the property is applied, but to my surprise, padding is also calculated based on the width of the parent element to which the property is applied, which is consistent with the behavior of margin. (By the way, when setting the width of an element as a percentage, it is calculated relative to the width of the parent container, and the vertical percentage settings of the element are also relative to the container's width, not the height.)
But there is a pitfall. The above is for unpositioned elements. I was curious about how the percentage values of top, right, bottom, and left for non-static positioned elements are calculated?
Example 2: Positioned Elements
<div style="height: 100px; width: 50px">
<div id="temp1" style="position: relative; top: 50%">Test top</div>
<div id="temp2" style="position: relative; right: 25%">Test right</div>
<div id="temp3" style="position: relative; bottom: 75%">Test bottom</div>
<div id="temp4" style="position: relative; left: 100%">Test left</div>
</div>
The offsets obtained are as follows:
temp1.top = 100px * 50% = 50px;
temp2.right = 100px * 25% = 25px;
temp3.bottom = 100px * 75% = 75px;
temp4.left = 100px * 100% = 100px;
For positioned elements, these values are also relative to the parent element, but unlike unpositioned elements, they are relative to the parent element's height, not the width.
>
When the parent element does not have a height, then percentage values are processed as auto instead
Although a bit confusing, just remember: for margin and padding, percentages are calculated based on the parent element's width, and for positioned elements, they are calculated based on the parent element's height.
#
-
** FK
* 429**967@qq.com
** Reference
CSS Margin Percentage
Assume a block container with a width of