css单位%在不同属性中的依据计算

在开发中，我们经常会使用%来作为一些css的属性值单位。那么我们知道他们具体到底依据什么来计算的具体的像素值的吗？

下面我们就来看一看吧。

%参考的应该是包含块(containing block)，即包含我们元素的块且它不必是直接的父元素。

width, height

这两个属性，他们都是相对包含块的width,height来计算的。这里的包含块并不是他们的直接父元素，而是根据position的一些定位来看元素被哪个父元素包裹。

  <style>
    .grandparent {
      position: relative;
      width: 300px;
      height: 200px;
      background: blue;  
    }
    .parent { 
      width: 100px; 
      height: 100px; 
      background: yellow; 
    } 
    
    .child { 
      position: absolute; 
      width: 50%; 
      height: 50%; 
      top: 25%; 
      left: 25%; 
      background: red; 
    } 
  </style>
  <!-- 当一个元素为其宽度分配一个百分比值时， 
    width 是基于包含块的width, height 是基于包含块的 height。 -->
    <div class="grandparent">
      <div class="parent">
        <div class="child"></div>
      </div>
    </div>

padding 水平和垂直

padding相关的属性，他们都是相对包含块的width来计算的。这里的包含块并不是他们的直接父元素，而是根据position的一些定位来看元素被哪个父元素包裹。

  <style>
    .grandparent {
      position: relative;
      width: 300px;
      height: 200px;
      background: blue;  
    }
    .parent { 
      width: 100px; 
      height: 150px; 
      background: yellow; 
    } 
    
    .child { 
      position: absolute; 
      width: 50px; 
      height: 50px; 
      padding-left: 10%;
      padding-top: 10%; 
      background: red; 
    } 
  </style>
  <div class="grandparent">
    <div class="parent">
      <div class="child"></div>
    </div>
  </div>

定位的top, left, right, bottom

• left, right: 相对于包含块的width。
• top, bottom: 相对于包含块的height。

  <style>
    .grandparent {
      position: relative;
      width: 300px;
      height: 200px;
      background: blue;  
    }
    .parent { 
      width: 100px; 
      height: 100px; 
      background: yellow; 
    } 
    
    .child { 
      position: absolute; 
      width: 50%; 
      height: 50%; 
      top: 25%; 
      left: 25%; 
      background: red; 
    } 
  </style>
  <!-- 当一个元素为其宽度分配一个百分比值时， 
    width 是基于包含块的width, height 是基于包含块的 height。 -->
    <div class="grandparent">
      <div class="parent">
        <div class="child"></div>
      </div>
    </div>

margin 水平和垂直

他们和padding一样，都是相对于包含块的width计算的。

  <style>
    .grandparent {
      position: relative;
      width: 300px;
      height: 200px;
      background: blue;  
    }
    .parent { 
      width: 100px; 
      height: 100px; 
      background: yellow; 
    } 

    .child {
      position: absolute;
      display: inline-block;
      background: red;
      width: 20px;
      height: 20px;
      margin-top: 50%;
      margin-left: 50%;
    }
  </style>
  <div class="grandparent">
    <div class="parent">
      <div class="child"></div>
    </div>
  </div>

transform：translate()

相对于自身宽高。

   <style>
    .grandparent {
      position: relative;
      width: 300px;
      height: 200px;
      background: blue;  
    }
    .parent { 
      width: 100px; 
      height: 100px; 
      background: yellow; 
    } 
    
    .child { 
      position: absolute; 
      width: 50px;
      height: 50px;
      transform: translate(25px, 25px);
      /* transform: translate(50%, 50%); */
      background: red; 
    } 
  </style>
  <div class="grandparent">
    <div class="parent">
      <div class="child"></div>
    </div>
  </div>

backgroun-size

他也是相对于自身宽高。

  <style>
    .parent {
      width: 300px;
      background: blue;
      height: 200px;
    }

    .child {
      background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-08c763e8c299ff4fdc345d23f2da944b_r.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663586577&t=653c8a6f71b9aca5abd919f4e00ef432);
      background-size: 50% 50%;
      /* 这个是通过一些计算。让背景图片放在具体的位置 */
      background-position: 50% 50%;
      /* background-position: 100% 100%; */
      background-repeat: no-repeat;
      background-color: red;
      width: 100px;
      height: 200px;
    }
  </style>
  <div class="parent">
    <div class="child"></div>
  </div>

font-size

这个属性有点特殊，他只和父元素的font-size值有关。

 <style>
  .grandparent {
      position: relative;
      width: 300px;
      height: 200px;
      background: blue;  
      font-size: 20px; 
    }
    .parent { 
      width: 100px; 
      height: 100px; 
      background: yellow; 
      font-size: 40px;
    } 
    
    .child { 
      position: absolute; 
      font-size: 100%;
    } 
  </style>
    <div class="grandparent">
      <div class="parent">
        <div class="child">12345</div>
      </div>
    </div>

希望大家也多多总结，以后也会继续测试。欢迎在评论区留言哦。

如果对大家有帮助，就来个star吧。