css盒模型（附图解）

所谓盒模型就是把HTML页面中的元素看作是一个矩形的盒子，网页由多个盒子组成，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

Doctype是盒模型的基础，没有确定doctype直接谈盒模型就是耍流氓
结论：

• 网页就是多个盒子嵌套排列的结果。
• 内边距出现在内容区域的周围，当给元素添加背景色图像时，该元素的背景色或背景图像也出现在内边距中。
• 外边距是该元素与相邻元素之间的距离
• 如果给元素定义边框属性，边框将出现在内边距和外边交距之间

注意：虽然盒子模型拥有内边距、外边距、边框、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性