首先，大家需要了解的是盒子的基本结构。每一个 HTML 元素，都可以看做是一个盒子。盒子包括四个部分：内容区、内边距、边框和外边距。这样的盒子叫做“普通盒子”或“块级盒子”。
div {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid #000;
}
<div>这是一个普通盒子</div>如果大家要给盒子加上背景色，那么这个盒子就变成了“背景盒子”。大家只需要在普通盒子的基础上加上background属性。
div {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid #000;
background: #ccc;
}
<div>这是一个背景盒子</div>需要注意的是，边框并不影响盒子的尺寸，所以上述盒子的实际大小仍为 100x100px。但是，如果大家要计算盒子的实际大小，需要将边框和内边距和内容区的大小都加上。
除了普通盒子和背景盒子，盒子还有几种特殊的类型。
第一种是“行内盒子”，这种盒子可以看做是文字的一部分，但是它可以接受内边距和边框等属性。例如下面的 span 元素就是一个行内盒子。
span {
padding: 5px;
border: 1px solid #000;
}
这是一段 <span>行内盒子</span> 文字。第二种是“内联块级盒子”，这种盒子比行内盒子更灵活，在页面中可以占据一定的空间，同时也可以接受内边距和边框等属性。常见的内联块级盒子有 img、input 等。
img {
display: inline-block;
padding: 5px;
border: 1px solid #000;
}
<img src="example.jpg">最后一种是“浮动盒子”，这种盒子可以让元素脱离文本流，向左或向右浮动，使得其他元素可以环绕着它布局。浮动盒子需要使用float属性。
div {
float: left;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid #000;
}
<div>这是一个浮动盒子</div>在实际的页面布局中，大家需要灵活地运用各种盒子类型，并根据需要使用 CSS 控制它们的样式和位置。