什么是100％，真正做到？ （多案例研究）(What does 100% really do?

我目前正在建设一个充分响应网站，我越试着去了解，更多的我不知道。 主要用百分比。

我知道一个％是基于第一定位的父。 不过，我已经对一些的jsfiddle例如，我有不同的结果：

小提琴

在所有案例中，我们有相同的基础：

HTML：

<div class="example">  
  <div class="container">  
    <div class="item"></div>
  </div>   
</div>

的CSS属性div S：

1. 的.example块具有position: relative 。 它有一个width: 60%其父母的：体）。
2. 该.container块具有position: static 。 它有一个宽度：80％（此时的.example ，因为它是相对块）。

我的问题：

当我想移动.item而不是块.example大小，但每个CSS属性我使用（ margin-left ， left ， transform等），100个％会导致不同的大小。 此外，如果我改变定位为.item （ static ， relative等）的尺寸是不同的再。

有人可以解释为什么100％ .item是不同的margin ， left ，或transform ？

Answer 1:

只是为了澄清对你采取小心， %比例不是对所有属性相同的计算值：

随着你的榜样默认位置是这样的：

• 在位置使用left

   Percentages of the width of the containing block 

  在这种情况下，由于您使用的absolute位置指涉父是最接近与定义的非静态的位置。 谁相对于定义的“示例”的容器。

  

• 在margin

   Percentages refer to the width of the containing block 

  在情况下，一个没有absolute位置是细的元件移动到左侧的确切的大小container的div从他的初始位置。

  

  当您添加absolute是现在的100％， example他的初始位置的空间之后。

  

• 在transform

   Percentages refer to the size of bounding box 

  因此，元件通过量等于其宽度的偏移。

  

文章来源: What does 100% really do? (multiple-case study)