盒子模型

参考博文：点击这里
作者：KwooJan
出处： http://www.w3cfuns.com本文版权归作者和w3cfuns共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。

盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！

什么是盒子模型？

对于初学者来说，不容易理解，但是对于生活中的盒子大家应该熟悉，大到集装箱，小到铅笔盒，盒子模型你完全可以理解成现实生活中的盒子就可以了，不然怎么能起个名字叫“盒子模型”呢?

好！既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫 “content(内容)”，而盒子的盒子壁给他起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“padding(内边距)”，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为"margin(外边距)"，请看下面两图：

OK~！这下盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)
，如下图：

我们的页面就是由许许多多的盒子组成的，但是现实生活中的盒子我们会忽略外边距(margin)，但是在页面中，我们是不能忽略外边距(margin)的，只有包括外边距的盒子模型在CSS中才是完整的，即使外边距为零，我们也不要忽略它，要知道他是存在的。

盒子3D模型

• 第一层border
• 第二层content+padding
• 第三层background-image
• 第四层background-color
• 第五层margin

盒子模型尺寸

盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸