我目前正在建立一个完全响应的网站,我越想了解,就越不了解。主要是百分比。
我知道a%是基于第一位家长。但是,我在JSFiddle上做了一些例子,得到了不同的结果:
Fiddle
在所有示例中,我们都有相同的基础:
HTML格式:

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

divs的CSS属性:
.example块具有position: relative。它有一个width: 60%(他的父母:身体)。
.container块具有position: static。它有一个宽度:80%(这次.example,因为它是一个相对块)。
我的问题:
当我想移动.item块而不是.example大小,但是对于我使用的每个CSS属性(margin-leftlefttransform,等等),100%会导致不同的大小。此外,如果我更改.itemstaticrelative等)的位置,则大小再次不同。
有人能解释为什么.item上的100%对于marginlefttransform是不同的吗?

最佳答案

请注意,%百分比不是所有属性的相同计算值:
对于您的示例,默认位置是:
使用left就位

Percentages of the width of the containing block

在这种情况下,因为您使用的是absolute位置,所以referent parent是定义了非静态位置的最接近的示例“定义为相对的容器。
margin
Percentages refer to the width of the containing block

如果一个没有absolute位置的人可以很好地将元素移到左边,精确地将containerdiv的大小从他的初始位置移到左边。
当你加上absolute时,现在是example在初始位置后的100%。
transform
Percentages refer to the size of bounding box

所以元素的偏移量等于它的宽度。

关于html - 100%真正做什么? (多案例研究),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26412633/

10-12 00:21
查看更多