推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第2/3页

首先需要了解CSS盒子模型的概念，它指的是由内容区域、内边距、边框和外边距四个部分组成的矩形框。而DIV布局是基于盒子模型来进行页面布局的。

在第2页，我们需要掌握CSS盒子模型的基本概念和如何应用CSS盒子模型进行布局。我们需要先清除默认样式，将所有元素的margin和padding设为0，然后设置一个div元素的宽度和高度，添加背景颜色和边框，就形成了一个基本的盒子模型。

在第3页，我们需要深入学习CSS盒子模型的内容区域、内边距、边框和外边距。比如可以通过设置相同的内边距和边框，将多个元素组合成一个整体。可以通过改变外边距来实现元素之间的间距调整。

以下是两个示例说明：

示例1

首先，在HTML中添加一个ID为box的div元素：

<div id="box"></div>

然后，在CSS中设置box的宽度、高度、背景色和边框：

#box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border: 1px solid #000;
}

这样就形成了一个宽高为200px的灰色盒子，有1px的黑色边框。

示例2

在HTML中添加三个div元素：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

然后，在CSS中设置box的宽度、高度、背景色、边框和外边距：

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border: 1px solid #000;
  margin: 10px;
}

这样就形成了三个宽高为100px的灰色盒子，它们之间有10px的外边距，有1px的黑色边框。这样的布局可以用来展示产品、图片等元素。