100% 到底能做什么？（多案例研究）答案

【问题标题】：What does 100% really do? (multiple-case study)100% 到底能做什么？（多案例研究）
【发布时间】：2014-12-12 07:20:36
【问题描述】：

我目前正在构建一个完全响应的网站，但我越想了解，就越不了解。主要是百分比。

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

Fiddle

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

HTML：

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

`div`s 的 CSS 属性：

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

我的问题：

当我想移动 .item 块而不是 .example 大小时，但对于我正在使用的每个 CSS 属性（margin-left、left、transform 等），100% 的结果是不同的尺寸。此外，如果我更改.item（static、relative 等）的位置，大小又会不同。

有人可以解释为什么.item 上的 100% 与 margin、left 或 transform 不同吗？

【问题讨论】：

CASCADING 样式表。 “以上”规则为“较低”规则设置基线值，并且值/计算向下级联。如果您将容器设置为 1000 像素宽，并且该容器中的子级设置为 80%，则子级的有效/计算大小将为 800 像素。执行 100% -> 50% -> 33% 使该孙元素有效地成为原始祖父母元素大小的1.0 * 0.5 * .33 -> 0.165 -> 16.5%，或者只是父元素大小的 33%，而父元素本身是祖父母元素的 1/2。
是的，但是我所有的 .item 都具有相同的 xpath：.example .container .item.. 但是 100% 始终不同，并且父级大小永远不会改变。
I know a % is based on the first parent with a relative position 这种说法不一定正确。事实上，定位元素为具有position 或absolute 的元素建立了一个包含块。而已。并非所有元素都如此。
你没有回答这个问题，为什么 .item 上的 100% 与 margin、left、ou transform 不同？

标签： html css width percentage

【解决方案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
```
所以元素的偏移量等于他的宽度。

【讨论】：

这个答案值得超过一个 +1。干得好，我不想发布如此完整的答案。
谢谢@HashemQolami 我只是认为这是一个真正的好问题......也许 OP 在公式上有点错误，但值得回答 % 在 CSS 中可能是一个棘手的概念
我真的很抱歉这个表述，但我的英语说得不太好。无论如何，非常感谢您的回复！
只记得 Louis Lazaris 写过一篇关于“Vertical Percentages in CSS”的文章。它可能会对某人有所帮助。
@Arthur np mate 我抓住了这个想法很高兴能帮助你

Fiddle

HTML：

divs 的 CSS 属性：

我的问题：

`div`s 的 CSS 属性：