了解CSS盒状模型 设计更佳网页

这是一个相当简单的页面——两段文字，一段在<div>之内，一段在<div>之外。<div>内部的文字指定了一个红色的虚线框，使盒状模型更易于理解。这里整个盒子的宽为350像素。下面就是这个盒子的外观（图B）：

图B

例1

接下来，我们增加一些补丁（列表B）：

列表B

#box {

?width: 350px;

?border-color: red;

?border-style: dashed;

padding: 10px;

}

图C显示的输出结果：

图C

增加的补丁

如你所见，在文字四个边上增加的补丁已将元素内容与边框间的空间加大了10个像素。现在盒子的整个宽为350+10+10=370像素。

然后，我们再增加边框的厚度（列表C）：

列表C

#box {

?width: 350px;

?border-color: red;

?border-style: dashed;

?padding: 10px;

border-width: 15px;

}