3.3 CSS盒子模型

我们已经具备一些基本的HTML和CSS知识，知道一个网页大概长什么样子。现在我们深入讨论盒子模型，看看HTML元素到底如何在浏览器中展示的。

根据CSS 框模型概述， 网页文档中所有的元素都是矩形的盒子（rectangular box），有宽度（width）、高度（height）、内边距（padding）、边框（border）、外边距（margin）。

重要的事情说三遍： 网页中的每个元素都是矩形的盒子。 网页中的每个元素都是矩形的盒子。 网页中的每个元素都是矩形的盒子。

Advice for tutor

1. 请教练以下图和代码为例，讲讲盒子的大小

  div {
    width: 267px;
    height: 24px;
    padding: 6px;
    border: 0px;
    margin: 0px;
  }

Margin 比较特别，它不会影响盒子本身的大小，但是它会 影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。

盒子本身的大小是这样计算的：

盒子大小	计算方法
Width	width + padding-left + padding-right + border-left + border-right
Height	height + padding-top + padding-bottom + border-top + border-bottom