CSS网页布局的核心内容:CSS盒模型
| margin:5px;
border:1px solid #333;} #b{border:20px solid #333; float:left;} #c{margin-left:5px; border:20px groove #f00;} #d{margin-left:5px; border:2px dashed #000; float:left;} #e{margin-left:5px; border:2px dotted #000; float:left;} #f{margin:5px; border-left:2px solid #fff; border-top:2px solid #fff; border-right:2px solid #333; border-bottom:2px solid #333; float:left;} #g{margin-top:5px; border-top:2px groove #333;} </style> </head> <body> <p id="all"> <p id="a">a盒子</p> <p id="b">b盒子（solid类型）</p> <p id="c">c盒子（groove类型）</p> <p id="d">d盒子（dashed类型）</p> <p id="e">e盒子（dotted类型）</p> <p id="f">f盒子</p> <p id="g">g盒子</p> </p> </body> </html> 为了更方便看到p的表现，笔者给外部p设置了#ccc背景色，并给内部p设置了#eee背景色。在浏览器地址栏输入http://localhost/box_border.htm，浏览效果如图11.21所示。
图11.21 边框样式设置 这个例子使XHTML对象看起来更像个盒子了，只是边框只是盒子包装中的一层，最外层的包装是不可见的外边距。边框的宽度计算非常重要，如果读者定位元素要充分考虑边框宽度，如图11.21所示，边框的常用设置方法为： border:宽度类型 颜色; 这是4条边框统一的设置方法，如果要分开设置4条边框，将border改为border-top（顶部边框）、border-bottom（底部边框）、border-left（左边框）和border-right（右边框）。而修改“类型”可以修改成不同样子的边框线条，常用的为solid（实线）、dashed（虚线）、dotted（点状线）、groove（立体线）、double（双线）、outset（浮雕线）等，读者可以一一尝试。 11.3.4 内边距的设置 内边距（padding）类似于HTML中表格单元格的填充属性，即盒子边框和内容之 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
