likes
comments
collection

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

作者站长头像
站长
· 阅读数 16

在开发中,我们经常会使用%来作为一些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>

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

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>

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

定位的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>

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

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>

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

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>

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

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>

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

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>

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

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

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