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

Question

我目前正在建立一個響應迅速的網站，而我嘗試了解的越多，我就越不了解。 主要是百分比。

我知道％是基於第一個定位的父對象。 但是，我在JSFiddle上做了一些示例，結果卻有所不同：

小提琴

在所有示例中，我們都有相同的基礎：

HTML：

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

div的CSS屬性：

1. .example塊的position: relative 。 它的width: 60% （他父母的身體）。
2. .container塊的position: static 。 它的寬度為：80％（這次是.example因為它是相對塊）。

我的問題：

當我想移動.item塊而不是.example大小時，但是對於我正在使用的每個CSS屬性（ margin-left ， left ， transform等），100％會產生不同的大小。 此外，如果我更改.item的位置（ static ， relative等），大小也會再次不同。

有人可以解釋為什么.item上的100％的margin ， left margin或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是example中其初始位置的空格之后的100％。

  

• transform

   Percentages refer to the size of bounding box 

  因此，該元素的偏移量等於其寬度。