提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 高低margin堆叠通报题目【css教程】,margin

我发明强迫症真的是我一个大病。。。每次都非得把一切状况都试验出来不可。。。BUT!!!!!!!!!悲催的是,这么多状况我基础记不住。。。照样要在写代码的时刻不停失足再排错~受不了本身了!不过照样把这部份总结到这里啦~

下面的几个部份应该是margin堆叠题目的一切状况了:

1、两个一般元素高低的margin齐集并为一个margin,哪一个大选哪一个!

两个浮动元素不会涌现margin通报的题目,依旧是上面元素的margin-bottom和下面元素的margin-top相加作为二者之间的margin值。

2、两个元素假如是包括关联,父元素和子元素高低margin值也齐集并(引荐进修:CSS视频教程)

当父元素不加边框,不设置宽高,即父级没有触发haslayout时

IE6、7和规范浏览器下,均会发作margin通报题目子元素和父元素的高度雷同(子元素的top将和父元素的top在一条直线上,bottom将和父元素的bottom在一条直线上)而父元素则挑选二者之间大的数值作为父元素的margin-top值和margin-bottom值!!!

子元素的margin-left和margin-right值依旧存在

当父元素不加边框,然则,设置宽或高或zoom:1;即父级加能够触发haslayout的属性时

规范浏览器下,会发作margin通报然则在IE6、7下则不会发作margin通报(即子元素的margin就是相干于父元素的,不会通报给父级)

当父级加边框,而且父级没有触发haslayout时

规范浏览器下,不会发作margin通报IE6、7下,子元素的margin完全消逝!

当父级加边框,而且父级触发haslayout(即加width或height或zoom:1)时, IE6、7和规范浏览器下,都不会发作margin通报!!!

关于IE6、7来讲:

即只需触发haslayout,不论给不给父元素加边框,不论规范浏览器会不会发作margin通报,IE6、7下都不会发作margin通报!!!

而关于规范浏览器来讲:

只有加边框才防止margin通报!!!

给父元素增加边框,则子元素和父元素之间的margin就有分割线了,此时将不会发作兼并征象了!假如给子元素增加边框二者的margin值照样没有被离开,所以依旧还会发作堆叠征象!

假如这里父元素里包括了多个块子元素,则每个子元素之间满足高低margin堆叠,挑选二者较大的margin作为二者之间的margin,第一个子元素的top和父元素堆叠(左图上面白色距浏览器顶的白色地区等于),末了一个子元素的bottom和父元素堆叠。IE6、7和规范浏览器显现结果均如左图。

此时,假如两个块元素是浮动元素,那末,那末就不存在子元素和父元素的margin通报状况,此时,高低的margin值则是二者之间的各自margin值相加!规范浏览器显现以下图中,IE6显现以下图右。但为何显现有差别呢?

由于,额滴神啊!一波未平一波又起!块状元素和横向margin和浮动三者引发了IE6的新的兼容性题目——双边距bug(注重IE7没有双边距bug!!!!)

由此

实践时,起首肯定要给父元素加触发haslyout的属性!这一条保证了在IE6、7下不涌现margin通报题目和margin值消逝题目;

然后,斟酌在规范浏览器下,给子元素加浮动能够处理没有border时涌现的margin通报题目,然则此时加浮动后会形成IE6的双边距bug,所以我们实践时只管将浮动的块状元素的margin换为padding,假如着实不能换就给该元素加display:inline;!

3、两个Div(A、B)高低之间没有margin值,然则A中有子元素有margin,这时候该子元素的margin值会通报到二者间,会使A、B两个元素之间添补上margin,仅限垂直方向!!!

关于这个题目,也许就是如许啦,实在也很简单,只是我把一切的状况列出来了,实在综合起来就是上面总结部份的内容。

我觉得这个margin通报和堆叠都是由于二者的margin值之间没有边框或者是padding将margin这一空缺地区离隔!!!!

以上就是高低margin堆叠通报题目的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"高低margin堆叠通报题目【css教程】,margin"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线