仓酷云

标题: CSS教程之CSS教程:Firefox扫瞄器下margin-top成绩 [打印本页]

作者: 飘灵儿 时间: 2015-1-15 23:31
标题: CSS教程之CSS教程:Firefox扫瞄器下margin-top成绩
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-1-17 23:07
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 再现理想 时间: 2015-1-24 19:01
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 飘飘悠悠 时间: 2015-2-2 13:20
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 只想知道 时间: 2015-2-7 22:04
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 精灵巫婆 时间: 2015-2-23 15:35
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 愤怒的大鸟 时间: 2015-3-7 09:53
可以使用 CSS 检查工具进行设计。

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

作者: 老尸 时间: 2015-3-21 18:25
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

欢迎光临仓酷云 (http://ckuyun.com/)