当我在做某事时,我注意到一个非常奇怪的行为,无法解释。两种情况之间的唯一区别是<i>
第二个示例中的smargin-top
设置为-10px
而不是-9px
。我使用负边距以相同的数量移动所有框顶部。
main, aside {
width: 100%;
padding: 20px 0 10px;
margin-bottom: 10px;
overflow: hidden;
background: lightblue;
}
main i, aside i {
float: left;
display: block;
width: 10px;
height: 10px;
margin: -9px 0 0 5px;
background: orange;
}
aside i {
margin-top: -10px;
}
<main>
<i></i>
<i></i>
<i></i>
</main>
<aside>
<i></i>
<i></i>
<i></i>
</aside>
顶部边距只有很小的变化,它们彼此堆叠而不是彼此堆叠。我不明白是什么原因造成的。我通过基于Gecko和WebKit的浏览器确认了此行为。
我将尝试对异常情况进行解释(或更好地称为解释)。我不确定我的解释是正确的,因为这些规范有很多规则,而且浏览器的实现可能也不完全符合这些规范。
第一个浮动框位于父级中最左侧,并向上移动10像素(由于-10像素边距)。当渲染搜索第二个框的位置时,它将开始查看父级的高度0,并从右向左移动,直到遇到另一个浮动,但这不是因为第一个浮动已完全移出了父级,所以它一直到左边 如果发生这种情况,仍然会遵循9个float定位规则(或多或少,这又取决于开发人员如何解释某些事情)。
另外,请从边距部分考虑此免责声明:
保证金属性的负值是允许的,但是可能存在特定于实现的限制。
您应该从中了解到,使用负边距需要您自担风险。
我的建议是放弃负的上边距,因为这是有问题的,而是使用一些移位position: relative
(或根本不移位)。
参考:
https : //www.w3.org/TR/CSS2/visuren.html#float-position https://www.w3.org/TR/CSS2/box.html#margin-properties
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句