父元素设置了margin-top和margin-left,
接下来
子元素设置margin-left:50px;
发现并没有什么问题,
然后接下来,再给子元素设置margin-top:50px;
发现不起作用,即使你把top设置为150也解决不了问题,只有你的top值大于父元素设置的top值才可以移动
而且会发现子元素连带着父元素一起移动,
是因为父子嵌套的元素,其垂直方向上的margin是连带在一起的,而且取最大值,
就好像父元素的上边线子元素检查不到了。
解决方法:
1,给父元素上面加一个border
当然这种方法不行,肯定不行,绝对不行
2,BFC(block format context)块级格式化上下文
CSS是将html每个元素都当成一个盒子,然后根据一定的原则,再根据你写的代码来渲染一个一个的盒子。
BFC就可以改变某些或者指定的一个盒子中的原则,再来进行渲染
比如一个代码中宽高100px ,渲染出来就是宽高100px
但是你使用了BFC之后,即使代码是宽高100px,渲染出来就会变成宽高50px,(举个例子,意思是这样的)
使用了BFC之后,特定的盒子就会遵循另一套语法规则。
如何触发一个盒子的bfc:
1,position:absolute
2, display:inline-block
3, float:left/right
4, overflow:hidden(溢出部分隐藏)
上面四种方法都是使父级元素变为bfc元素,然后再解决
例子:
解决了。
至于overflow:hidden的作用就是溢出部分隐藏,下面看一下:
改动之后:
下一个bug
然后在span2加上margin-left:100px,发现区域边长了
说明两者之间的区域是靠两个人共同维护的
这是水平的,下面是垂直的:
然后div2中加上margin-top:100px;
发现不起作用
说明垂直方向上的margin是合并的,
然后变成200px的距离,取最大值
怎么解决:
将一个元素或者两个元素放到bfc环境中
现在就可以了,当然这个问题改变了Html页面结构,这而且这个bug可以通过计算解决,所以不用bfc解决