今天做任务的时候遇到一个浮动和负边距的题目,很难理解。看视频的时候老师说是负边距的特性,,我就有点郁闷了。特性这种东西怎么掌握,,果然,因为不知其所以然,在遇到问题的时候麻烦就出现了。
不多说,我们直接看题。
-
不知道怎么贴代码,截图吧
当时看到这个给父元素设置负边距。让元素上去这句话就懵逼了。而且看效果图边上也还是有缝隙。
- 其实关键点就是浮动的一个基本特性:浮动元素在占满一行之后才会到下一行。
当我们给父元素设置负边距的时候随着负边距值的增大,上排的浮动元素负边距也在增大,所以导致其并没有占满一行。所以下面的浮动元素会上浮来帮助占满这一行。 - 当没有设置负margin值的时候是每层两个绿色盒子
计算过程如下: - margin-left是20px;
- 外层盒子宽度是900px
- 盒子宽度是286px【(900-20*2)/3=286.6666667】
上排元素开始左浮:286*
2+20*
2=612px
我们设需要左移的margin值是X
900-612-X = 286+20
X= -18px
所以margin的值是左移-18px -
有同学会问,等式右边为什么是286+20?
- 因为当浮动元素上去的时候,我们的margin-left设置的是20px,所以并排排列的时候我们需要考虑进去。
如果你已经实验了一遍,细心地同学会发现,倒数第二张图上箭头指的地方有一定的空隙,可能简书这里看不出来,但是浏览器上细看的话还是可以看见的。本来我还不知道为啥,写这篇的时候发现我取的值286是约等于的,所以会有一定的差距。
900-860/
3*
2 +40-X=860/3 +20
X=-20
再一次惊奇的发现,我擦,原来老师的是对的。。。。我去.......................懵逼了,但是这时候发现右边又出现了空隙。。。。(恩,我决定用-19px。)
希望得到同学指正。
更新
想了一下,代码中用的是286px,当然会出现这种情况。