av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

終于搞懂了 CSS 中的百分比是基于什么工作的了！

大家有沒有對 CSS 中的百分比是如何工作的感興趣?有沒有想過，為什么它有時會亂七八糟，沒啥頭緒?反正我是有，所以今天分享這篇文章，對自己來說是加深理解，同時也希望對大家有所幫助。

什么百分比?

作為百分比，顯然應該有一個目標作為參考源，這個參考一般是父元素。這是正確的，但并不涵蓋所有情況。最正確的答案應該是包含塊(containing block)，即包含我們元素的塊且它不必是直接的父元素。

看看下面的例子：

代碼：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.    
    3.   
  
  
  
  3.     
 
  •   
    •  
  •   
     
 
 
 
        
  
  
  
    1. .grandparent { 
      2.   
  
  
  
    2.   position: relative; 
      3.   
  
  
  
    3.   width: 200px; 
      4.   
  
  
  
    4.   height: 200px; 
      5.   
  
  
  
    5.   background: #eaeaea; 
      6.   
  
  
  
    6. } 
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8. .parent { 
      9.   
  
  
  
    9.   width: 100px; 
      10.   
  
  
  
    10.   height: 100px; 
      11.   
  
  
  
    11.   background: #aaa; 
      12.   
  
  
  
    12. } 
      13.   
  
  
  
    13.  
      14.   
  
  
  
    14. .child { 
      15.   
  
  
  
    15.   position: absolute; 
      16.   
  
  
  
    16.   width: 50%; 
      17.   
  
  
  
    17.   height: 50%; 
      18.   
  
  
  
    18.   top: 25%; 
      19.   
  
  
  
    19.   left: 25%; 
      20.   
  
  
  
    20.   background: red; 
      21.   
  
  
  
    21. } 
      22.

    在上面的例子中，我創(chuàng)建了 3 個嵌套 div，它們是具有以下特征的3個正方形

    如果百分比單位以父級為來源，則子級的大小應該是它的 1/2，但上面的不是，子級的大小實際上等于父級，也就是祖父級的 1/2。原因是祖父級 div 是子級 div 的真正包含塊，因為子級具有 position: absolute ，對應于在祖父級中設置的 position:relative 。

    因此，為了確定哪個是元素的實際包含塊，它完全基于元素本身的 position 屬性。

    但是，對于某些屬性，百分比單元的引用源既不是父塊也不是包含塊，而是它本身—— 自身元素。

    百分比的屬性

    width/height

    如上面的例子中看到的，當一個元素為其寬度分配一個百分比值時， width 是基于包含塊的width, height 是基于包含塊的 height。

    padding

    對于 padding，垂直(padding-top/padding-bottom)或水平(padding-left/padding-right)都是基于包含塊的 height 來計算。

    來個例子：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
     
  •   
     
 
 
 
        
  
  
  
    1. .parent { 
      2.   
  
  
  
    2.   background: #eaeaea; 
      3.   
  
  
  
    3.   width: 300px; 
      4.   
  
  
  
    4.   height: 200px; 
      5.   
  
  
  
    5. } 
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. .child { 
      8.   
  
  
  
    8.   display: inline-block; 
      9.   
  
  
  
    9.   background: red; 
      10.   
  
  
  
    10.   padding-top: 50%; 
      11.   
  
  
  
    11.   padding-left: 50%; 
      12.   
  
  
  
    12. } 
      13.   
  
  
  
    13.  
      14.   
  
  
  
    14. .parent { 
      15.   
  
  
  
    15.   position: relative; 
      16.   
  
  
  
    16. } 
      17.

    線上地址：https://codepen.io/khangnd/pen/powbjEL

    在這個例子中：

    最后的結(jié)果是，子元素的大小相當于父級元素 1/2寬度，也就是一個 3x3 的正方形。

    margin

    與 padding，margin 的百分比(垂直和水平)也是相對于包含塊的寬度來計算。

    來個事例：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.  
      4.  
 
 

     
 
 
 
        
  
  
  
    1. .parent { 
      2.   
  
  
  
    2.   background: #eaeaea; 
      3.   
  
  
  
    3.   width: 300px; 
      4.   
  
  
  
    4.   height: 200px; 
      5.   
  
  
  
    5. } 
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. .child { 
      8.   
  
  
  
    8.   display: inline-block; 
      9.   
  
  
  
    9.   background: red; 
      10.   
  
  
  
    10.   width: 50px; 
      11.   
  
  
  
    11.   height: 50px; 
      12.   
  
  
  
    12.   margin-top: 50%; 
      13.   
  
  
  
    13.   margin-left: 50%; 
      14.   
  
  
  
    14. } 
      15.

    在這個例子中：

    其結(jié)果是，子元素被定位在離父級元素的上邊距和左邊距3個單位的地方(父級寬度的1/2)。

    top/bottom/left/right

    這4個定位屬性也是基于包含塊的寬度來計算的。

    來個例子：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.  
      4.  
 
 

     
 
 
 
        
  
  
  
    1. .parent { 
      2.   
  
  
  
    2.   position: relative; 
      3.   
  
  
  
    3.   background: #eaeaea; 
      4.   
  
  
  
    4.   width: 300px; 
      5.   
  
  
  
    5.   height: 200px; 
      6.   
  
  
  
    6. } 
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8. .child { 
      9.   
  
  
  
    9.   position: absolute; 
      10.   
  
  
  
    10.   background: red; 
      11.   
  
  
  
    11.   width: 16.67%; 
      12.   
  
  
  
    12.   height: 25%; 
      13.   
  
  
  
    13.   top: 50%; 
      14.   
  
  
  
    14.   left: 50%; 
      15.   
  
  
  
    15. } 
      16.

    在這個事例中：

    最終結(jié)果，子 div 被定位在離父 div 的頂部邊緣 2個單位的位置(父 div 高度的 1/2)，并被定位在離父 div 的左側(cè)邊緣 3 個單位的位置(父 div 寬度的 1/2)。

    transform: translate()

    一個用于動畫/過渡的不可思議的屬性，它也支持百分比值。然而，這個屬性并不指其包含的塊，而是指其自身。

    來個例子：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.  
      4.  
 
 

     
 
 
 
        
  
  
  
    1. .parent { 
      2.   
  
  
  
    2.   background: #eaeaea; 
      3.   
  
  
  
    3.   width: 300px; 
      4.   
  
  
  
    4.   height: 200px; 
      5.   
  
  
  
    5. } 
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. .child { 
      8.   
  
  
  
    8.   background: red; 
      9.   
  
  
  
    9.   width: 100px; 
      10.   
  
  
  
    10.   height: 50px; 
      11.   
  
  
  
    11.   transform: translate(50%, 50%); 
      12.   
  
  
  
    12. } 
      13.

    在這個事例中：

    最后結(jié)果，子 div 被定位在離父 div 的頂部邊緣 0.5 個單位的位置(自身高度的 1/2)，并被定位在離父 div 的左側(cè)邊緣 1 個單位的位置(自身寬度的 1/2)。

    background-size

    background-size 屬性將百分比單元的復雜性提升到一個新的水平

    此屬性的百分比值指的是背景定位區(qū)域，類似于包含塊，但添加了以下 3 個因素：

    這三個值是由 background-origin 給出，具體看 MDN :https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin

    來個例子：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.  
      4.  
 
 

     
 
 
 
        
  
  
  
    1. .parent { 
      2.   
  
  
  
    2.   background: #eaeaea; 
      3.   
  
  
  
    3.   width: 300px; 
      4.   
  
  
  
    4.   height: 200px; 
      5.   
  
  
  
    5. } 
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. .child { 
      8.   
  
  
  
    8.   background-image: url(https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.png); 
      9.   
  
  
  
    9.   background-size: 50% 50%; 
      10.   
  
  
  
    10.   background-repeat: no-repeat; 
      11.   
  
  
  
    11.   background-color: red; 
      12.   
  
  
  
    12.   width: 50%; 
      13.   
  
  
  
    13.   height: 50%; 
      14.   
  
  
  
    14. } 
      15.

    在這個例子中:

    其結(jié)果是，背景圖像被拉伸為 1.5 x 1 的大小。

    background-position與 background-size 類似，background-position 屬性的百分比也依賴于背景定位區(qū)域。

    在這個例子中:

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.  
      4.

    css

     
 
 
 
        
  
  
  
    1. .parent { 
      2.   
  
  
  
    2.   background: #eaeaea; 
      3.   
  
  
  
    3.   width: 300px; 
      4.   
  
  
  
    4.   height: 200px; 
      5.   
  
  
  
    5. } 
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. .child { 
      8.   
  
  
  
    8.   background-image: url(https://d2fltix0v2e0sb.cloudfront.net/dev-rainbow.png); 
      9.   
  
  
  
    9.   background-size: 50% 50%; 
      10.   
  
  
  
    10.   background-position: 50% 50%; 
      11.   
  
  
  
    11.   background-repeat: no-repeat; 
      12.   
  
  
  
    12.   background-color: red; 
      13.   
  
  
  
    13.   width: 50%; 
      14.   
  
  
  
    14.   height: 50%; 
      15.   
  
  
  
    15. } 
      16.

    在本例中，使用了與前面相同的圖像和布局。當我們改變background-position的值時，可以看到一些變化：

    注意：background-position: 0 50% 是下面的縮寫

    顯然，這個屬性的百分比背后有一些計算，而不僅僅是圖像的頂部和左側(cè)邊緣與孩子的距離。通過一些研究和測試，似乎 background-position 屬性在產(chǎn)生一個實際值之前依賴于以下計算。

    offset X = (容器的寬度-圖像的寬度) * background-position-x offset Y = (容器的高度-圖像的高度) * background-position-y

    在這種情況下：

    font-size

    對于 font-size ，百分比值僅指向它的直接父塊。

    來個例子：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.   font-size: 13px 
      3.   
  
  
  
    3.    
      4.   
  
  
  
    4.     font-size: 26px 
      5.   
  
  
  
    5.     font-size: 50% 
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7.  
      8.

    在這個例子中，我使用與第一個例子相同的布局，字體大小分配如下。

    我們可以清楚地看到，child 的字體大小現(xiàn)在與 grandparent 一樣，是 parent 的1/2。

    線上地址：https://codepen.io/khangnd/pen/MWoeXMO

    ~~ 完，最近一個禮拜都在趕項目，基本都要2點后才能睡，這篇文章是間斷整理好的，現(xiàn)在時間 是 9/20 深夜3點，睡了，感謝大家的觀看。

    作者：Khang 譯者：前端小智 來源：dev 原文：https://dev.to/khgnd/understanding-css-percentage-44gd


    本文名稱：終于搞懂了 CSS 中的百分比是基于什么工作的了！
    鏈接地址：http://uogjgqi.cn/article/cogghsh.html
    掃二維碼與項目經(jīng)理溝通

    我們在微信上24小時期待你的聲音

    解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

    其他資訊