井井客

搜索

margin-top无效的解决办法

在写CSS的时候,会遇到各种各样的问题,而margin-top无效情况,根据我自己写样式时遇到的情况则可以分为两类:盒子模型、CSS权重。

margin-top无效的解决办法

第一种情况:子元素使用margin-top时,子元素无效,但父元素掉落。

在最大化保持父元素属性的前提下有三种解决margin-top父元素掉落的办法:
【1】父元素使用overflow:hidden;
【2】子元素使用float;
【3】子元素不用margin-top,改用padding-top(建议在没有背景时使用)

第二种情况:针对在样式文件头部定义的通用样式如:.mt10 { margin-top:10px; }在html页面中引用无效。

在排除第一种情况后,这很可能就是你样式的CSS权重问题了,在你引用样式的标签本身应该也定义样式如 .divClass { margin:0 auto; },这种引用两个相同CSS权重的样式,结果就是后面的样式属性会覆盖前面的样式属性,最终显示的就是“margin:0 auto;”。
下面贴个网上找的关于CSS权重的说明的文章链接,再写段我摘出来的大致说明~

网址:http://www.nowamagic.net/librarys/veda/detail/1606
说明:

【1】内联样式权重最高,权重值为1000(基本定义的样式属性 无可替代)
【2】ID选择器权重第二,权重值为100
【3】类选择器权重第三,权重值为10
【4】标签与伪类权权重第四,权重值为1
【5】通用选择器(*),子选择器(>)和相邻同胞选择器(+)权重值为0(无CSS权重)
举例说明
某元素定义了行内样式style="height:100px",则这个元素样式height:100px权重为1000,同时它引用了一个样式表内的样式.div且.div定义height:200px;,因为.div的权重为10低于1000,所以这个元素最终执行的height值为100px。

回到一开始说的.mt10在html元素中无效。比较笨的办法是在body中添加一个ID

<body id="body">

同时将.mt10样式前面加上#body

#body .mt10 {margin-top:10px;}

。因为我在写样式的时候很少会写具有很高权重的样式,所以#body .mt10 的权重(权重值110)足够用了。当然每个人的情况各不一样,根据自己的情况来做最好了~

文章TAG:CSS

作者:井井客原创来源:原创
本文标题:margin-top无效的解决办法
本文链接:http://www.jingjingke.com/c/1980.html

上一篇:通过正则表达式去掉style网页内部样式表
下一篇:JS获取CSS外部样式地址

文章分类

相关阅读

随便看看