CSS网页布局的核心内容:CSS盒模型
| ot; "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>外边距设置</title> <style type="text/css"> *{margin: 0px;} #all{width:400px; height:300px; margin:0px auto; background-color:#ccc;} #a,#b,#c,#d,#e{width:150px; height:50px; text-align:center; line-height:50px; background-color:#fff;} #a{margin-left:5px; margin-bottom:20px;} #b{margin-left:5px; margin-right:5px; margin-top:6px; float:left;} #c{margin-bottom:5px;} #e{margin-left:5px; margin-top:15px;} </style> </head> <body> <p id="all"> <p id="a">a盒子</p> <p id="b">b盒子</p> <p id="c">c盒子</p> <p id="d">d盒子</p> <p id="e">e盒子</p> </p> </body> </html> 为了更方便看到p的表现，笔者给外部p设置了浅灰色背景色，并给内部p设置了白色背景色。在浏览器地址栏输入http://localhost/box_margin.htm，浏览效果如图11.19所示。这个示例非常典型，特别是b盒子、c盒子和d盒子之间的关系，笔者作关系图如图11.20所示。
图11.19 外边距设置 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
