我目前正在建立一个完全响应的网站,我越想了解,就越不了解。主要是百分比。
我知道a%是基于第一位家长。但是,我在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
是不同的吗? 最佳答案
请注意,%
百分比不是所有属性的相同计算值:
对于您的示例,默认位置是:
使用left
就位
Percentages of the width of the containing block
在这种情况下,因为您使用的是
absolute
位置,所以referent parent是定义了非静态位置的最接近的示例“定义为相对的容器。在
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
所以元素的偏移量等于它的宽度。
关于html - 100%真正做什么? (多案例研究),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26412633/