首頁 > 文章 > web前端 > 詳解CSS中的percentage百分比值使用方法

詳解CSS中的percentage百分比值使用方法

高洛峰原創: 2017-03-09 16:33:262454瀏覽

一起來了解CSS中的percentage百分比值使用方法

百分比值是CSS中設計各種元素尺寸以及頁面佈局的基礎手段,這裡就帶大家來徹底掌握CSS中的percentage百分比值使用,包括percentage轉px的方法等,here we go~

百分比旨在相對於父元素的相同屬性的大小。
如果用來設定字體，則相對的就是父元素的字體大小。
大多數瀏覽器中和

標籤中的預設字體尺寸是100%.

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

如果用來設定寬和高等非字體尺寸，則以百分比為單位的長度值是基於具有相同屬性的父元素的長度值。

<!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>

再囉嗦一點關於父元素的問題：何為父元素，相對定位（relative），絕對定位（absolute），浮動（float），固定（fixed）中如何找尋父元素？
由於HTML是樹狀結構，標籤套標籤，一般情況下的父子關係很明朗。

<p class="parent">
    <p class="child"></p>
</p>

1.相對定位元素，它的父元素符合標籤巢狀。
2.絕對定位元素，它的父元素是離它最近的定位元素（絕對定位，相對定位，固定，但不包括浮動）或視窗尺寸（沒找到定位元素時）。
3.浮動元素，它的父元素也符合標籤巢狀。
4.固定元素（特殊的絕對定位），它的父元素是視窗（瀏覽器預設用來展示內容的區域的尺寸，不是html 或body 的尺寸）。
注意一下絕對定位就行了，其他的相對簡單。

<!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>

詳解CSS中的percentage百分比值使用方法

box 寬度為視窗的一半，can 的寬高是 box 的寬高的一半。
將 can 設為 position: fixed; 則其父元素將不再是 box 而是瀏覽器視窗。
詳解CSS中的percentage百分比值使用方法

can 的寬度是視窗寬高的一半。
浮動元素的父元素跟普通元素的父元素是一樣的。

<!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>

詳解CSS中的percentage百分比值使用方法

注意： padding、 margin 如果設定了百分比，上，下，左，右用的都是父元素寬度的值為標準去計算。

percentage轉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>

得到的offset如下：

temp1.marginTop = 20px * 50% = 10px;   
temp2.marginRight = 20px * 25% = 5px;   
temp3.marginBottom = 20px * 75% = 15px;   
temp4.marginLeft = 20px * 100% = 20px;

然後，我又測試了padding，原以為padding的值會根據應用了該屬性的相關元素來計算，但讓我驚訝的是，padding也是根據應用該屬性的父元素的寬來計算的，跟margin表現一致。 (再插一句：當以百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的,元素垂直的百分比設定也是相對於容器的寬度，而不是高度。)
但有一個坑，上面都是對於未定位元素。好奇的我又很好奇，對於非靜態定位元素的top, right, bottom, 和left的百分比值又怎麼計算呢？
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>

得到的offset如下：

temp1.top = 100px * 50% = 50px;   
temp2.rightright = 100px * 25% = 25px;   
temp3.bottombottom = 100px * 75% = 75px;   
temp4.left = 100px * 100% = 100px;

對於定位元素，這些值也是相對於父元素的，但與非定位元素不同的是，它們是相對於父元素的高而不是寬。
when the parent element does not have a height, then percentage values are processed as auto instead
雖然有點困惑，但只需要記住：對於margin和padding，百分比按照父元素的寬計算，對於定位元素，則依照父元素的高計算。

以上是詳解CSS中的percentage百分比值使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：淺談css清除浮動clearfix和clear的用法介紹下一篇：淺談css清除浮動clearfix和clear的用法介紹

看更多