欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

徹底掌握CSS中的percentage百分比值使用

segmentfault   發(fā)布時間：2016-06-06 11:30:02   作者：Chinaxiang   我要評論
百分比值是CSS中設(shè)計各種元素尺寸以及頁面布局的基礎(chǔ)手段,這里就帶大家來徹底掌握CSS中的percentage百分比值使用,包括percentage轉(zhuǎn)px的方法等,here we go~

百分比旨在相對于父元素的相同屬性的大小。
如果用來設(shè)置字體，則相對的就是父元素的字體大小。
大多數(shù)瀏覽器中<html> 和<body> 標(biāo)簽中的默認(rèn)字體尺寸是100%.

CSS Code復(fù)制內(nèi)容到剪貼板
  1. html {font-size: 100%;}   
  2. body {font-size: 100%;}   
  3. 100% = 1em = 16px = 12pt  

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.   <meta charset="utf-8">   
  5.   <title>JS Bin</title>   
  6.   <style type="text/css">   
  7.   div.parent {   
  8.     margin:150px;   
  9.     width: 200px;   
  10.     height: 200px;   
  11.     border: 1px solid blue;   
  12.   }   
  13.   div.child {   
  14.     width: 50%;   
  15.     height: 50%;   
  16.     border: 1px dashed black;   
  17.   }   
  18.   </style>   
  19. </head>   
  20. <body>   
  21.   <div class="parent">   
  22.     <div class="child"></div>   
  23.   </div>   
  24. </body>   
  25. </html>  

再啰嗦一點關(guān)于父元素的問題：何為父元素，相對定位（relative），絕對定位（absolute），浮動（float），固定（fixed）中如何找尋父元素？
由于HTML是樹形結(jié)構(gòu)，標(biāo)簽套標(biāo)簽，一般情況下的父子關(guān)系很明朗。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="parent">  
  2.     <div class="child"></div>  
  3. </div>  

1.相對定位元素，它的父元素符合標(biāo)簽嵌套。
2.絕對定位元素，它的父元素是離它最近的定位元素（絕對定位，相對定位，固定，但不包括浮動）或者視窗尺寸（沒找到定位元素時）。
3.浮動元素，它的父元素也符合標(biāo)簽嵌套。
4.固定元素（特殊的絕對定位），它的父元素是視窗（瀏覽器默認(rèn)用來展示內(nèi)容的區(qū)域的尺寸，不是html 或body 的尺寸）。
注意一下絕對定位就行了，其他的相對簡單。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.   <meta charset="utf-8">   
  5.   <title>JS Bin</title>   
  6.   <style type="text/css">   
  7.     html {   
  8.         width:1000px;   
  9.     }   
  10.     body {   
  11.         width:800px;   
  12.     }   
  13.     #box {   
  14.         width:50%;   
  15.         height:300px;   
  16.         position: absolute;   
  17.         margin-left: 200px;   
  18.         border: 1px solid red;   
  19.     }   
  20.     #can {   
  21.         position:absolute;   
  22.         top:100px;   
  23.         left:100px;   
  24.         width:50%;   
  25.         height:50%;   
  26.         border:1px solid black;   
  27.     }   
  28.   </style>    
  29. </head>     
  30. <body>   
  31.     <div id="box">   
  32.         <div id="can"></div>   
  33.     </div>   
  34.        
  35. </body>     
  36. </html>  

201666113109667.png (800×318)

box 寬度為視窗的一半，can 的寬高是 box 的寬高的一半。
將 can 設(shè)置為 position: fixed; 則其父元素將不再是 box 而是瀏覽器視窗。
201666113144599.png (800×338)

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.   <meta charset="utf-8">   
  5.   <title>JS Bin</title>   
  6.   <style type="text/css">   
  7.     html {   
  8.         width:1000px;   
  9.     }   
  10.     body {   
  11.         width:800px;   
  12.     }   
  13.     #box {   
  14.         width:50%;   
  15.         height:300px;   
  16.         position: absolute;   
  17.         margin-left: 200px;   
  18.         border: 1px solid red;   
  19.     }   
  20.     #can {   
  21.         float:left;   
  22.         width:50%;   
  23.         height:50%;   
  24.         border:1px solid black;   
  25.     }   
  26.   </style>    
  27. </head>     
  28. <body>   
  29.     <div id="box">   
  30.         <div id="can"></div>   
  31.     </div>   
  32.        
  33. </body>     
  34. </html>  

201666113210234.png (800×276)

注意： padding、 margin 如果設(shè)置了百分比，上，下，左，右 用的都是父元素寬度 的值為標(biāo)準(zhǔn)去計算。

percentage轉(zhuǎn)px
Example 1: Margins

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="width: 20px">   
  2. <div id="temp1" style="margin-top: 50%">Test top</div>   
  3. <div id="temp2" style="margin-right: 25%">Test rightright</div>   
  4. <div id="temp3" style="margin-bottom: 75%">Test bottombottom</div>   
  5. <div id="temp4" style="margin-left: 100%">Test left</div>   
  6. </div>  

得到的offset如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. temp1.marginTop = 20px * 50% = 10px;   
  2. temp2.marginRight = 20px * 25% = 5px;   
  3. temp3.marginBottom = 20px * 75% = 15px;   
  4. temp4.marginLeft = 20px * 100% = 20px;  

然后，我又測試了padding，原以為padding的值會根據(jù)應(yīng)用了該屬性的相關(guān)元素來計算，但讓我驚訝的是，padding也是根據(jù)應(yīng)用該屬性的父元素的寬來計算的，跟margin表現(xiàn)一致。(再插一句：當(dāng)按百分比設(shè)定一個元素的寬度時，它是相對于父容器的寬度計算的,元素豎向的百分比設(shè)定也是相對于容器的寬度，而不是高度。)
但有一個坑，上面都是對于未定位元素。好奇的我又很好奇，對于非靜態(tài)定位元素的top, right, bottom, 和left的百分比值又怎么計算呢？
Example 2: Positioned Elements

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div style="height: 100px; width: 50px">   
  2. <div id="temp1" style="position: relative; top: 50%">Test top</div>   
  3. <div id="temp2" style="position: relative; right: 25%">Test rightright</div>   
  4. <div id="temp3" style="position: relative; bottom: 75%">Test bottombottom</div>   
  5. <div id="temp4" style="position: relative; left: 100%">Test left</div>   
  6. </div>  

得到的offset如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. temp1.top = 100px * 50% = 50px;   
  2. temp2.rightright = 100px * 25% = 25px;   
  3. temp3.bottombottom = 100px * 75% = 75px;   
  4. temp4.left = 100px * 100% = 100px;  

對于定位元素，這些值也是相對于父元素的，但與非定位元素不同的是，它們是相對于父元素的高而不是寬。
when the parent element does not have a height, then percentage values are processed as auto instead
雖然有點困惑，但只需要記?。簩τ趍argin和padding，百分比按照父元素的寬計算，對于定位元素，則按照父元素的高計算。
文章的最后，推薦一個網(wǎng)站：http://www.css3.com，上面有很多關(guān)于CSS問題的資源。

相關(guān)文章

  • CSS中的選擇器種類總結(jié)及效率比較

    這篇文章主要介紹了CSS中的選擇器種類總結(jié)及效率比較,包括偽類選擇器和偽元素選擇器等,需要的朋友可以參考下
    2016-06-06

  • 純CSS實現(xiàn)鼠標(biāo)懸停顯示圖片效果的實例分享

    這里來給大家推薦一個純CSS實現(xiàn)鼠標(biāo)懸停顯示圖片效果的實例分享,以針對鼠標(biāo)移到tr標(biāo)簽上來添加hover這種最簡單的方式來演示,簡單明了,需要的朋友可以參考下
    2016-06-06

  • 淺談css清除浮動(clearfix和clear)的用法

    下面小編就為大家?guī)硪黄獪\談css清除浮動(clearfix 和clear)的用法，小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考，一起跟隨小編過來看看吧
    2023-05-12

  • CSS z-index 層級關(guān)系優(yōu)先級的概念

    這篇文章主要介紹CSS z-index 層級關(guān)系優(yōu)先級的概念，講解的比較詳細(xì)，需要的朋友可以參考下。
    2016-06-06

  • CSS中的line-height行高屬性學(xué)習(xí)教程

    line-height對于頁面中字體的行距等排版方面的效果至關(guān)重要,這里為大家整理了CSS中的line-height行高屬性學(xué)習(xí)教程,包括line-height的各種取值設(shè)定等方面,需要的朋友可以參
    2016-06-06

  • CSS 高級技巧總結(jié)(必看)

    下面小編就為大家?guī)硪黄狢SS 高級技巧總結(jié)(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06

最新評論