您的位置:首页 >科技 >正文

科技常识:css设置margin-top失效及解决办法

今天小编跟大家讲解下有关css设置margin-top失效及解决办法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css设置margin-top失效及解决办法 的相关资料,希望小伙伴们看了有所帮助。

在web网站开发中,有时候我们给html元素设置的margin-top或margin-bottom属性,但是无效,并没有取到任何作用,这是什么原因呢?常出现两种情况:

一、兄弟元素之间margin-top失效先看下面代码:

<div> <div class="box1"> float: left </div> <div class="box2"> clear:both; margin-top:20px; </div> </div>

两个层box1和box2,box1具有浮动属性,box2没有,这时候设置box2的上边距margin-top没有效果。网上能找到的两种比较靠谱的解释:

1:“在css2.1中,水平的margin不会被折叠;垂直margin可能在一些盒模型中被折叠…” 2:当第一个层浮动,而第二个没浮动层的margin会被压缩,详见--浮动元素后非浮动元素的margin的处理。得到解决问题思路:要浮动一起浮动,要不就都不浮动。解决办法: 1.box2增加float属性 2.box1与box2之间增加一层"<divstyle="clear:both;"></div>"二、子元素设置margin-top作用于父容器

<div class="box" style="height:100px;background:red;"> <div class="box2" style="clear:both; margin-top:20px; height:50px; width:500px; background:#000;"</div> </div>

当给box2设置margin-top时,在FF下仅作用于父容器。解决办法:

1.给父容器box加overflow:hidden;属性 2.父容器box加border除none以外的属性 3.用父容器box的padding-top代替margin-top

总汇

现象:当两个空的块级元素嵌套时,如果内部的块设置有margin-top属性,而且父元素没有下边解决方法所述的特征,那么内部块的margin-top属性会绑架父元素(即将margin-top传递凌驾给了父元素)。就好比一个小兵,看到上级有漏洞,就假传圣旨,利用漏洞扩张自己的权利。只要设置父元素的border(栅栏)或者padding(隔离墙),就能管住这个调皮的下属。

解决方法:

1、设置父元素或者自身的display:inline-block;2、设置父元素的border:1px aqua solid;(>0)3、设置父元素的padding:1px;(>0)4、给父元素设置overflow:hidden;5、给父元素或者自身设置position:absolute;6、设置父元素非空,填充一定的内容。

这个现象并不是bug,而是有理论依据的:

《on having layout》hasLayout 会影响一个盒子和其子孙的边距重叠。根据规范,一个盒子如果没有上补白和上边框,那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。

但值得一提的是,只有在FF和Chrome下才会出现这种margin-top绑架父节点的情况,在IE6 IE7中均显示正常,但这恰恰说明了他们是不符合规范的,而FF合Chrome则是严格遵守规范的。

来源:爱蒂网

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时候联系我们修改或删除,多谢。