CSS 匣子模型（CSS Box Model）-HTML教程-爱易网页

CSS 匣子模型（CSS Box Model）

日期：2014-05-17　浏览次数：20559 次

CSS 盒子模型（CSS Box Model）

如果你不能理解什么盒子，那我们这里暂且把一组<div> </div>当作一个盒子，一个用来存放内容的容器。
?

范例：

相关代码如下：

以下是代码片段：[www.xlnv.net]
.boxModel?{
????width:200px;
????height:150px;
????padding:20px;
????color:#FF0000;
????border:1px?solid?#000000;
????background-image:url(../tutorial/divcss/top_bg5.gif);
????background-color:#6699FF;
????margin:15px;
}

<div?class="boxModel">
????有了这个盒子模型你还会搞不清楚例如"border","padding","margin"之间的层次、关系和相互影响吗？
</div>?

在以上的CSS代码中，设置了背景色，但是实际效果中并没有显示出来，是因为背景图片覆盖了背景色。另外margin的效果也不明显，让我们将两个盒子放到一起时候，效果会明显点。

在这个例子中，实际看到的盒子边框的宽度是200px + 20px + 20px = 240px，同样，高度是150px + 20px + 20px = 190px;

其中padding，包括了padding-top,padding-right,padding-bottom,padding-left，可以单独设置每个属性的值，当四个属性的值一样时候，可以只用一个padding实现同样的效果，"border","margin"也是同样的道理。更多的CSS属性介绍我们将在以下部分学习到。