Detailed explanation of how to use percentage value in CSS-CSS Tutorial-php.cn

Detailed explanation of how to use percentage value in CSS

高洛峰

Release： 2017-03-09 16:33:26

Original

2487 people have browsed it

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

tags in most browsers is 100%.

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

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

Detailed explanation of how to use percentage value in CSS

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.
Detailed explanation of how to use percentage value in CSS

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>

Copy after login

Detailed explanation of how to use percentage value in CSS

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>

Copy after login

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;

Copy after login

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>

Copy after login

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;

Copy after login

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!