How to use percentages in CSS

CSS support a variety of unit forms, such as percentages, PX, PT, REM, and so on, the percentage and px are commonly used units, with the mobile end and response to the popular, REM, VH, VW also began to be widely used, these units you may not know, want to understand? You can stamp this: css:7 a unit that you may not know.

Today, in the Segmentfault community, there were two questions about percentage calculations, one on the size of the DOM element when the percentage was used in the translate, and the other on the percentages used in padding, margin, and so on. How does the percentage change to PX?

For the first, the move distance is calculated based on the size of the element itself:

[The percentage] refer[s] to the size of the element ' s box
Specific reference: CSS3 translate in percent (self-owned ladder)

For the second, I think percentage px should be browser according to the CSS rules to complete, but how to calculate it?

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 resulting offset is as follows:

Temp1.margintop = 20px * 50% = 10px;
Temp2.marginright = 20px * 25% = 5px;
Temp3.marginbottom = 20px * 75% = 15px;
Temp4.marginleft = 20px * 100% = 20px;

I then tested the padding that the padding value would be calculated based on the relevant element that applied the attribute, but to my surprise, padding was calculated based on the width of the parent element that applied the attribute, consistent with the margin performance. (again: When you set the width of an element by percentage, it is calculated relative to the width of the parent container, and the vertical percentage of the element is set relative to the width of the container, not the height.) )

But there is a hole, above all for the element that is not positioned. Curiously, I was curious as to how to calculate the percentage value of the top, right, bottom, and left of statically positioned elements.

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 resulting offset is as follows:

Temp1.top = 100px * 50% = 50px;
Temp2.right = 100px * 25% = 25px;
Temp3.bottom = 100px * 75% = 75px;
Temp4.left = 100px * 100% = 100px;

For anchored elements, these values are also relative to the parent element, but unlike the non positioned elements, they are relative to the parent element's height rather than width.

When the parent element does is not have a height, then percentage values are processed as auto instead
It's a bit confusing, but just remember: for margin and padding, the percentages are calculated by the width of the parent element, and for the anchored element, the height of the parent element.