100％真正做到了什么？ （多案例研究）

Question

我目前正在建立一个完全响应的网站，我越努力理解，我就越不知道。主要是百分比。

我知道％是基于第一个定位的父级。但是，我在JSFiddle上做了一些例子，我得到了不同的结果：

Fiddle

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

HTML：

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

div s的CSS属性：

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

我的问题：

当我想移动.item块而不是.example大小时，但对于我使用的每个CSS属性margin-left，left，{{ 1}}等，100％会产生不同的大小。此外，如果我更改transform（.item，static等）的定位，则尺寸会再次不同。

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

Answer 1

为了澄清您的注意事项，%百分比与所有属性的计算值不同：

使用您的示例，默认位置为：

• 使用left

  的位置

  Percentages of the width of the containing block
  

  在这种情况下，由于您使用的是absolute位置，因此指定的父级是最接近的非静态位置。 ＆＃34;例如＆＃34;容器是相对的。

  

• 在margin

  中

  Percentages refer to the width of the containing block
  

  如果一个没有absolute位置的人正好将元素向左移动，那么container div的大小与其初始位置完全相同。

  

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

  

• 在transform

  中

  Percentages refer to the size of bounding box
  

  因此元素的偏移量等于其宽度。