终于搞懂了 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.

    在上面的例子中，我创建了 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.   
      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.   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

    在这个例子中：

    最后的结果是，子元素的大小相当于父级元素 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.

    在这个例子中：

    其结果是，子元素被定位在离父级元素的上边距和左边距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.

    在这个事例中：

    最终结果，子 div 被定位在离父 div 的顶部边缘 2个单位的位置(父 div 高度的 1/2)，并被定位在离父 div 的左侧边缘 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.

    在这个事例中：

    最后结果，子 div 被定位在离父 div 的顶部边缘 0.5 个单位的位置(自身高度的 1/2)，并被定位在离父 div 的左侧边缘 1 个单位的位置(自身宽度的 1/2)。

    background-size

    background-size 属性将百分比单元的复杂性提升到一个新的水平

    此属性的百分比值指的是背景定位区域，类似于包含块，但添加了以下 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.

    在这个例子中:

    其结果是，背景图像被拉伸为 1.5 x 1 的大小。

    background-position与 background-size 类似，background-position 属性的百分比也依赖于背景定位区域。

    在这个例子中:

     
 
 
 
        
  
  
  
    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% 是下面的缩写

    显然，这个属性的百分比背后有一些计算，而不仅仅是图像的顶部和左侧边缘与孩子的距离。通过一些研究和测试，似乎 background-position 属性在产生一个实际值之前依赖于以下计算。

    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 的字体大小现在与 grandparent 一样，是 parent 的1/2。

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

    ~~ 完，最近一个礼拜都在赶项目，基本都要2点后才能睡，这篇文章是间断整理好的，现在时间 是 9/20 深夜3点，睡了，感谢大家的观看。

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

    标题名称：终于搞懂了 CSS 中的百分比是基于什么工作的了！
    分享地址：http://www.shufengxianlan.com/qtweb/news31/367431.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    营销型网站建设知识

    同城分类信息

    成都茶叶销售　　 　成都网站设计　　 　成都多线服务器托管　　 　成都网站建设　　 　app开发公司　　 　支点广告　　 　分类目录网站　　 　服务器租用　　 　成都小程序制作　　 　联通机柜租用　　 　vi形象设计　　 　成都品牌网站设计　　 　微信公众号开发　　 　成都网站设计制作公司　　 　成都宣传画册设计　　 　成都建网站　　 　网站开发　　 　成都服务器托管　　 　绵阳梓潼网站建设　　 　成都圣月制冷