布局模型(6)六种浮动与流动模型混合布局示例

作者：yahu　来源：本站原创　发布时间：2008年10月10日

　　在本章中，我们将演示浮动模型与流动模型混合布局的6种基本布局方式，从中我们可以总结出浮动模型与流动模型进行混合布局的一些规律和特点。虽然实际网页布局中的应用是千变万化的，但是从这些总结的规律中我们可以举一反三地进行实践和应用。

　　我们要强调一下在前几章中得出的规律：由于浮动模型和流动模型的布局规则不同，浮动模型和流动模型的对象是处于不同的层中的。在阅读本章前请仔细阅读前章《布局模型(5)混合布局中的浮动模型与流动模型》一文，在理解了前章的内容后，才能理解以下布局中的说明。

1、全部流动

　　网页中的所有元素都是以流动模型进行布局。
　　所有元素都将遵循文档流的规则自上而下、从左至右进行布局。

　　要注意：上下布局的流动元素的外边距将会发生重叠，取重叠边界最大的一个外边距的值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>全部流动－演示1</title> <STYLE type=text/css> body { margin:0px; padding:0px; font: normal normal normal 12px/150% Arial, "宋体" ,Helvetica,sans-serif; } #con1, #con2, #con3, #con4 { margin-bottom:10px; padding:5px; border:2px black solid; background:#eee; } .class1, .class2, .class3 { line-height:30px; } .class1 { background:#333; color:#fff; } .class2 { background:#0dd; } .class3 { background:#666; color:#fff; } </STYLE> <div id="con1"> con1 <div class="class1">　栏目一（1）</div> <div class="class2">　栏目一（2）</div> <div class="class3">　栏目一（3）</div> </div> <div id="con2"> con2 <div class="class1">　栏目二（1）</div> <div class="class2">　栏目二（2）</div> <div class="class3">　栏目二（3）</div> </div> <div id="con3"> con3 <div class="class1">　栏目三（1）</div> <div class="class2">　栏目三（2）</div> <div class="class3">　栏目三（3）</div> </div> <div id="con4"> con4 <div class="class1">　栏目四（1）</div> <div class="class2">　栏目四（2）</div> <div class="class3">　栏目四（3）</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

共6页您在第1页首页上一页 1 2 3 4 5 6 下一页尾页跳转到页本页共有3133个字符