bottom没有效果,css 设置margin-top或margin-bottom失效不取作用的解决方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bottom没有效果,css 设置margin-top或margin-bottom失效不取作用的解决方法相关的知识,希望对你有一定的参考价值。

参考技术A 首先来看一个案例:

.bottom-box

margin -top:30px;



我设置了margin-top属性,我的上边距应该距离父元素为30px;

可是结果如何呢?结果并不是class为bottom-box的div上边距离父元素30px;而是距离body元素30px;

什么原因呢?

当个子元素设置margin-top属性时,如何父元素没有设置padding属性,即padding属性为0,那么会出现以上这个情况。

再来看一个实例:

http://www.manongjc.com/article/1263.html

其在IE6和IE7下显示效果为

margin:20px; 只有margin-bottom失效了。

解决办法:只要在浮动的最后一个元素后面加上“

.float_divfloat:left; margin:20px; width:100px; height:100px; display:inline; background-color:#CCC;

.clearclear:both;

还有个简单点的解决方法:

IE6/7下margin-bottom无效一般出现在容器里某元素设置后在父容器内无效,这个时候只需要在父容器中加入以下两句css,基本上所有的浏览器都兼容了:

overflow:hidden;zoom:100%;

这个方法不用添加额外的标签,也是很好的解决办法!

Css中Position定位详解

参考技术A Position属性确认元素的定位

static 是默认定位值,它的定位元素不受top、left、right、bottom的影响,也就是说你给元素设置这四个属性的任何值都没有效果

relative 相对定位,设置相对定位元素的top、left、right、bottom会使当前元素相对于当前位置做一定的偏移。

比如说在做表单布局的时候,有时候label的值并没有和输入框上下居中对齐,它有一点点偏下,效果不是很好看,这个时候我们可以给label向上设置一下偏移让他们居中对齐

absolute 是绝对定位,绝对定位的元素相对于最近的定位祖先元素进行定位,如果没有定位祖先元素,那么就按body定位

absolute最典型的例子就是结合relative一块完成效果,比如我有一个p,它是在页面居中的,但是它的宽度和高度是动态的,我们还有一个span标签希望永远在这右下角10px的位置,这个时候我们就可以利用absolute完成

fixed 是相对视口定位的,简称浮云定位,这个意味着就像你滚动页面,它始终位于同一个位置,top、left、right、bottom用于设置当前元素的位置。

常用的例子就是页面右下角,滚动到顶部的的功能,我们可以对这个元素设置fixed浮动定位,当用户一直向下滚动浏览网页后,想一下子回到顶部,它只要点这个元素就行了,因为之个元素是浮云定位,所以永远是在用户可视范围的右下角

以上是关于bottom没有效果,css 设置margin-top或margin-bottom失效不取作用的解决方法的主要内容,如果未能解决你的问题,请参考以下文章

css怎样让边框有另一张图这样的立体效果

行内元素的上下margin 和 img元素的上下margin

css

详解CSS的相对定位和绝对定位

CSS,为啥bottom:-30px和top:30px效果不一样

css样式中怎样控制下划线的粗细?