Html 100%真的能做什么？（多案例研究）

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

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

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

HTML:

div

s的CSS属性：

.example

块具有

位置：relative

。它有一个

宽度：60%

（其父：身体）

.container

块具有

位置：static

。它的宽度为：80%（这次是

.example

，因为它是一个相对块）

我的问题是： 当我想移动

.item

块而不是

.example

大小时，但是对于我正在使用的每个CSS属性（

左边距

，

左边距

，

变换

，等等），100%的结果是不同的大小。此外，如果我更改

.item

（

静态

，

相对

，等等）的位置，大小也会有所不同

---

有人能解释一下为什么

.item

上的100%与

边距

、

左

或

变换

不同吗？

只是为了澄清一下，请注意

%

百分比并非所有属性的计算值都相同：

在您的示例中，默认位置如下：

• 使用

  左

  Percentages of the width of the containing block
  

  在这种情况下，由于您使用的是

  绝对位置

  位置，因此引用的父对象是定义了非静态位置的最近对象。定义为相对的“示例”容器

• 在

  页边距中

  Percentages refer to the width of the containing block
  

  如果没有

  绝对

  位置，则可以将元素向左移动，使其与

  容器

  div的大小保持一致
  当您添加

  绝对值

  时，现在是

  示例

  在其初始位置的空格后的100%

• 在

  转换中

  Percentages refer to the size of bounding box
  

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

---

仅为向您澄清，请注意所有属性的

%

百分比计算值不同：

在您的示例中，默认位置如下：

• 使用

  左

  Percentages of the width of the containing block
  

  在这种情况下，由于您使用的是

  绝对位置

  位置，因此引用的父对象是定义了非静态位置的最近对象。定义为相对的“示例”容器

• 在

  页边距中

  Percentages refer to the width of the containing block
  

  如果没有

  绝对

  位置，则可以将元素向左移动，使其与

  容器

  div的大小保持一致
  当您添加

  绝对值

  时，现在是

  示例

  在其初始位置的空格后的100%

• 在

  转换中

  Percentages refer to the size of bounding box
  

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

---

层叠样式表。“以上”规则为“较低”规则设置基线值，值/计算向下级联。如果您将容器设置为1000px宽，并且该设置中的子容器设置为80%，则子容器的有效/计算大小将为800px。执行100%->50%->33%的操作将使孙辈元素有效地

1.0*0.5*.33->0.165->16.5%

原始祖辈元素的大小，或者仅为父元素大小的33%，其本身是祖辈元素大小的1/2。是的，但这里所有my.item都有相同的xpath:.example.container.item。。但是100%始终是不同的，父项大小永远不会改变。

我知道百分比是基于具有相对位置的第一个父项的。

这句话不一定正确。事实上，一个定位元素为具有

绝对
位置的
元素建立一个包含块。就这样。并非所有元素都是如此。您没有回答这个问题，为什么100%打开。页边距、左侧、ou变换的项目不同？层叠样式表。“以上”规则为“较低”规则设置基线值，值/计算向下级联。如果您将容器设置为1000px宽，并且该设置中的子容器设置为80%，则子容器的有效/计算大小将为800px。执行100%->50%->33%的操作将使孙辈元素有效地
1.0*0.5*.33->0.165->16.5%
原始祖辈元素的大小，或者仅为父元素大小的33%，其本身是祖辈元素大小的1/2。是的，但这里所有my.item都有相同的xpath:.example.container.item。。但是100%始终是不同的，父项大小永远不会改变。
我知道百分比是基于具有相对位置的第一个父项的。
这句话不一定正确。事实上，一个定位元素为具有
绝对
位置的
元素建立一个包含块。就这样。并非所有元素都是如此。你不能回答这个问题，为什么100%打开。项目的边距、左侧、ou变换不同？这个答案应该不止一个+1。太好了，我没有觉得发布这么完整的答案。谢谢@HashemQolami我只是觉得这是一个非常好的问题…也许OP在公式上有一些错误，但应该得到一个答案%在CSSI中可能是一个棘手的概念。我真的很抱歉这个公式，但我的英语说得不是很好。不管怎样，非常感谢你的回复！刚刚记得路易斯·拉扎里斯写过一篇关于“”的文章。“这可能会对某人有所帮助。”阿瑟·马特我明白了这个想法，很高兴能帮助乌瑟斯。这个答案应该不止是1+1。干得好，我不想发布如此完整的答案。谢谢@HashemQolami我只是觉得这是一个非常好的问题…也许OP在公式上有一些错误，但应该得到一个答案%在CSSI中可能是一个棘手的概念。我真的很抱歉公式化