How to use the percentage percent value in a detailed CSS

Together to understand how percentage percent values are used in CSS

The percent value is the basis for designing various element sizes and page layouts in CSS, and here we take you through the use of percentage percent values in CSS, including the method of percentage to PX, and so on, here we go~

The percentage is designed to be relative to the size of the same property as the parent element.
If you use to set the font, the relative is the font size of the parent element.
The default font size in the

HTML {font-size:100%;}   body {font-size:100%;}   100% = 1em = 16px = 12pt

If used to set width and high non-font dimensions, the length value in percent is based on the length value of the parent element with the same property.

<! DOCTYPE html>   

Just a little bit more about the parent element: What is a parent element, relative positioning (relative), absolute positioning (absolute), floating (float), and how to find the parent element in a fixed [fixed]?
Because HTML is a tree structure, label set label, in general, the parent-child relationship is very clear.

<p class= "Parent" >    <p class= "Child" ></p></p>

  1. Relative positioning element , whose parent element conforms to the tag nesting. 
  2. Absolute positioning element , its parent element is the nearest positioning element (absolute positioning, relative positioning, fixed, but not including floating) or the window size (when the anchor element is not found). 
  3. Floating element , whose parent element also conforms to the tag nesting. 
  4. Fixed element  (special absolute positioning) whose parent element is the window (the size of the area in which the browser defaults to present the content, not the size of the HTML or body). 
 Note that absolute positioning is OK, the other is relatively simple. 

<! DOCTYPE html>   


box is half the width of the window, and the width of the can is half the width of the box.
The can is set to position:fixed; The parent element will no longer be the box but the browser window.

The width and height of the can is half the width of the window.
The parent element of the floating element is the same as the parent element of the normal element.

<! DOCTYPE html>   


Note: padding, margin If set a percentage, upper, lower, left, right is used to calculate the value of the parent element width as standard.

Percentage turn px
Example 1:margins

<p style= "width:20px" >   <p id= "Temp1" style= "margin-top:50%" >test top</p> <p   id= "Temp2" Style= "margin-right:25%" >test rightright</p>   <p id= "Temp3" style= "margin-bottom:75%" >Test bottombottom</p>   <p id= "Temp4" style= "margin-left:100%" >test left</p>   </p>

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;

Then I tested padding and thought that the value of padding would be calculated based on the relevant element that applied the attribute, but to my surprise, padding was also 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 percentage setting for the element vertical is also relative to the width of the container, not the height.) )
But there is a pit, above all for an element that is not positioned. Curious I was curious, for the non-static positioning elements of the top, right, bottom, and left the percentage value of how to calculate it?
Example 2:positioned Elements

<p style= "height:100px; width:50px ">   <p id=" Temp1 "style=" position:relative; top:50% ">test top</p> <p   id=" Temp2 " Style= "position:relative; right:25% ">test rightright</p>   <p id=" Temp3 "style=" position:relative; bottom:75% ">Test bottombottom</p>   <p id= "Temp4" style= "position:relative; left:100%" >test left</p>   </p >

The resulting offset is as follows:

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

For anchored elements, these values are also relative to the parent element, but unlike the non-anchored elements, they are high rather than wide relative to the parent element.
When the parent element does not has a height, then percentage values is processed as auto instead
It's a bit confusing, but just remember: for margin and padding, percentages are calculated by the width of the parent element, and for the anchor element, the parent element is calculated as high.