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

來源:互聯網
上載者:User
一起來瞭解CSS中的percentage百分比值使用方法

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

百分比旨在相對於父元素的相同屬性的大小。
如果用來設定字型,則相對的就是父元素的字型大小。
大多數瀏覽器中<html> 和<body> 標籤中的預設字型尺寸是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>

box 寬度為視窗的一半,can 的寬高是 box 的寬高的一半。
將 can 設定為 position: fixed; 則其父元素將不再是 box 而是瀏覽器視窗。

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>

注意: 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,百分比按照父元素的寬計算,對於定位元素,則按照父元素的高計算。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.