CSS教程之CSS教程:Firefox扫瞄器下margin-top成绩

只看该作者 · 发表于 2015-1-15 23:31:52

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
网页制造Poluoluo文章简介：Firefox下margin-top成绩.
很早之前就有发明这个成绩，也渐渐的探索出了一些制止这个成绩的纪律，可是由于对照懒，迟迟没有细究缘故原由，明天再次碰到，忍辱负重...一探求竟。

登录/注册后可看大图

长呈现两种情形

（一）margin-top生效
先看上面代码：
<div>
<divclass="box1">float:left</div>
<divclass="box2">clear:both;margin-top:20px;</div>
</div>两个层box1和box2，box1具有浮动属性，box2没有，这时候候设置box2的上边距margin-top没无效果。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>www.Poluoluo.com</title><styletype="text/css"></style></head><body><div><divclass="box1">float:left</div><divclass="box2">clear:both;margin-top:20px;</div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
网上能找到的两种对照靠谱的注释：1：“在css2.1中，程度的margin不会被折叠；垂直margin大概在一些盒模子中被折叠…”2：当第一个层浮动，而第二个没浮动层的margin会被紧缩，详见--浮动元素后非浮动元素的margin的处置（地点）。

失掉办理成绩思绪：要浮动一同浮动，要就一同不浮动。

办理举措：

1.box2增添float属性
2.box1与box2之间增添一层"<divstyle="clear:both;"></div>"

（二）子元素设置margin-top感化于父容器
<divclass="box"style="height:100px;background:red;">
<divclass="box2">clear:both;margin-top:20px;height:50px;width:500px;background:#000;</div>
</div>当给box2设置margin-top时，在FF下仅感化于父容器。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>www.Poluoluo.com.com</title><styletype="text/css"></style></head><body><divclass="box"style="height:100px;background:red;"><divclass="box2">clear:both;margin-top:20px;height:50px;width:500px;background:#000;</div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
办理举措：

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

本人事情中碰到的总结，大概会有不松散的中央，若有发明但愿指出！
</p>
另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。

只看该作者 · 发表于 2015-3-21 18:25:04

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-3-15 00:03:42

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-3-7 09:53:45

可以使用 CSS 检查工具进行设计。

只看该作者 · 发表于 2015-2-23 15:35:45

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-2-7 22:04:46

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-2-2 13:20:10

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-1-24 19:01:50

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-1-17 23:07:58

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之CSS教程:Firefox扫瞄器下margin-top成绩

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子