日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
終于搞懂了 CSS 中的百分比是基于什么工作的了！

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

什么百分比?

作為百分比，顯然應(yīng)該有一個(gè)目標(biāo)作為參考源，這個(gè)參考一般是父元素。這是正確的，但并不涵蓋所有情況。最正確的答案應(yīng)該是包含塊(containing block)，即包含我們?cè)氐膲K且它不必是直接的父元素。

看看下面的例子：

代碼：

 
 
 
 
      
  
  
  
  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 個(gè)嵌套 div，它們是具有以下特征的3個(gè)正方形

    • 最外面的組元 div 是一個(gè)淺灰色，大小為 4x4
    • 父元素 div的顏色為深灰色，大小為 2x2
    • 以及分配 50% 大小的紅色子 div

    如果百分比單位以父級(jí)為來源，則子級(jí)的大小應(yīng)該是它的 1/2，但上面的不是，子級(jí)的大小實(shí)際上等于父級(jí)，也就是祖父級(jí)的 1/2。原因是祖父級(jí) div 是子級(jí) div 的真正包含塊，因?yàn)樽蛹?jí)具有 position: absolute ，對(duì)應(yīng)于在祖父級(jí)中設(shè)置的 position:relative 。

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

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

    百分比的屬性

    width/height

    如上面的例子中看到的，當(dāng)一個(gè)元素為其寬度分配一個(gè)百分比值時(shí)， width 是基于包含塊的width, height 是基于包含塊的 height。

    padding

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

    來個(gè)例子：

     
 
 
 
        
  
  
  
    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

    在這個(gè)例子中：

    • 父 div 的大小為 6x4。
    • 子 div的大小為 0，但 padding-top 和 padding-left 分別為 50%

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

    margin

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

    來個(gè)事例：

     
 
 
 
        
  
  
  
    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.   width: 50px; 
      11.   
  
  
  
    11.   height: 50px; 
      12.   
  
  
  
    12.   margin-top: 50%; 
      13.   
  
  
  
    13.   margin-left: 50%; 
      14.   
  
  
  
    14. } 
      15.

    在這個(gè)例子中：

    • 父級(jí) div 的大小為 6x4。
    • margin-top 和 margin-left 分別為 50%

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

    top/bottom/left/right

    這4個(gè)定位屬性也是基于包含塊的寬度來計(jì)算的。

    來個(gè)例子：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.   
     
  •   
     
 
 
 
        
  
  
  
    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.

    在這個(gè)事例中：

    • 父級(jí) div 的大小為 6x4
    • 子元素有 position: absolute， top 和 left 分別為 50%

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

    transform: translate()

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

    來個(gè)例子：

     
 
 
 
        
  
  
  
    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.   background: red; 
      9.   
  
  
  
    9.   width: 100px; 
      10.   
  
  
  
    10.   height: 50px; 
      11.   
  
  
  
    11.   transform: translate(50%, 50%); 
      12.   
  
  
  
    12. } 
      13.

    在這個(gè)事例中：

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

    background-size

    background-size 屬性將百分比單元的復(fù)雜性提升到一個(gè)新的水平

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

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

    來個(gè)例子：

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

    在這個(gè)例子中:

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

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

    在這個(gè)例子中:

     
 
 
 
        
  
  
  
    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.

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

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

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

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

    在這種情況下：

    font-size

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

    來個(gè)例子：

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

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

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

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

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

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


    本文題目：終于搞懂了 CSS 中的百分比是基于什么工作的了！
    網(wǎng)頁地址：http://www.5511xx.com/article/cogghsh.html

    其他資訊