Home > Article > Web Front-end > Detailed explanation of how to use percentage value in CSS
Detailed explanation of how to use percentage value in CSS
- 高洛峰Original
- 2017-03-09 16:33:262454browse
Let’s learn how to use the percentage value in CSS
Percentage value is the basic method for designing various element sizes and page layouts in CSS. Here we will take you to thoroughly master the percentage value in CSS. Use, including the method of converting percentage to px, etc., here we go~
Percentage is intended to be relative to the size of the same attribute of the parent element.
If used to set the font, it will be relative to the font size of the parent element.
The default font size in the and
html {font-size: 100%;}
body {font-size: 100%;}
100% = 1em = 16px = 12pt
If used to set non-font sizes such as width and height , the length value in percent is based on the length value of the parent element with the same attribute.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
p.parent {
margin:150px;
width: 200px;
height: 200px;
border: 1px solid blue;
}
p.child {
width: 50%;
height: 50%;
border: 1px dashed black;
}
</style>
</head>
<body>
<p class="parent">
<p class="child"></p>
</p>
</body>
</html>
Let’s talk a little more about the parent element: what is the parent element, relative positioning (relative), absolute positioning (absolute), float (float), and how to fix it (fixed) Looking for parent element?
Since HTML has a tree structure, with tags inside tags, the parent-child relationship is generally clear.
<p class="parent">
<p class="child"></p>
</p>
1. Relatively positioned element , its parent element conforms to tag nesting.
2. Absolutely positioned element, its parent element is the nearest positioned element (absolute positioning, relative positioning, fixed, but not including floating) or the window size (when no positioned element is found) .
3. Floating element , its parent element also conforms to tag nesting.
4. Fixed element (special absolute positioning), its parent element is the window (the size of the area used by the browser to display content by default, not the size of html or body).
Just pay attention to absolute positioning, the rest is relatively simple.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html {
width:1000px;
}
body {
width:800px;
}
#box {
width:50%;
height:300px;
position: absolute;
margin-left: 200px;
border: 1px solid red;
}
#can {
position:absolute;
top:100px;
left:100px;
width:50%;
height:50%;
border:1px solid black;
}
</style>
</head>
<body>
<p id="box">
<p id="can"></p>
</p>
</body>
</html>
The width of box is half of the window, and the width and height of can is half of the width and height of box.
Set can to position: fixed; then its parent element will no longer be a box but a browser window. 
The width and height of can is half the width and height of the window.
The parent element of a floating element is the same as the parent element of a normal element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html {
width:1000px;
}
body {
width:800px;
}
#box {
width:50%;
height:300px;
position: absolute;
margin-left: 200px;
border: 1px solid red;
}
#can {
float:left;
width:50%;
height:50%;
border:1px solid black;
}
</style>
</head>
<body>
<p id="box">
<p id="can"></p>
</p>
</body>
</html>
Note: If padding and margin are set as percentages, the top, bottom, left, and right values are the standard width of the parent element. Go figure.
percentage to 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 offset obtained 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 the padding. I thought the padding value would be calculated based on the related elements to which the attribute was applied, but to my surprise, the padding was also calculated based on the width of the parent element to which the attribute was applied. The performance is consistent with margin. (One more sentence: When the width of an element is set by percentage, it is calculated relative to the width of the parent container. The vertical percentage setting of the element is also relative to the width of the container, not the height.)
But There is a pit, the above are all for unpositioned elements. I'm curious, and I'm curious, how to calculate the percentage values of top, right, bottom, and left for non-statically positioned elements?
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 obtained 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 positioned elements, these values are also relative to the parent element , but unlike non-positioned elements, they are relative to the parent element's height rather than its width.
When the parent element does not have a height, then percentage values are processed as auto instead
Although it is a bit confusing, just remember: for margin and padding, the percentage is calculated according to the width of the parent element, and for positioned elements , it is calculated based on the height of the parent element.
The above is the detailed content of Detailed explanation of how to use percentage value in CSS. For more information, please follow other related articles on the PHP Chinese website!