我个人认为，彻底深入的学习 CSS 需要非常清晰透彻的理解 CSS 的四大核心要点即： 盒模型、文档流、浮动、定位。为防止一些同学在个人理解时可能走的一些弯路，这里将分别从这几个核心要点谈起，今天首先需要讲述的便是 CSS 的首要核心要点：CSS Box Model 盒模型。
首先我们来看 CSS 盒模型的两个示意图（点击小图查看大图）：
层叠样式表盒模型主要由这些元素组成：margin（边界、外补丁）border（边框）padding（填充、内补丁）height（高）width（宽）从上面的示意图也很容易看出这些元素及属性分别具体的含义。
值得说明的是如果你的页面没有做 DOCTYPE 声明时，标准浏览器将使用标准盒模型解析元素盒子，而 IE 浏览器将使用 IE 的盒模型解析元素盒子，这两种盒模型最大的区别就是对于盒子 width 和 height 的属性值定义：另外对于标准盒模型来说 height 的值即是内容 content 的高度 width 的值即是 content 的宽度，而对于微软 IE 浏览器的盒模型来说 width 的值将包括 border padding 及 content 的宽度总和，高 height 的值也同样包括了 border padding 及 content 的高度总和。
解决这种问题的方法就是在网页文件的头部使用 DOCTYPE 声明的，目前建议采用 XHTML 宽松型标准，即在网页源码中 <html> 标签之前加入以下声明：
这段 DOCTYPE 将告诉浏览器使用标准的 W3C 盒模型来渲染网页代码，如果少了这句麻烦就大了，就等着不停的调整浏览器兼容性吧。现在了解了盒模型几个属性直接的关系之后，想要任意调整网页里面各个盒子的大小及间距就变得非常容易了。其中 margin padding border 均可以在属性名称后面添加 -top -right -bottom -left 等值来分别指定不同方向上的数值，但我个人建议使用缩写即“属性：上 右 下 左； 属性：上 左右 下； 属性：上下 左右；”几种缩写方法，具体如何缩写不在今天讨论范围内。
另外一个需要注意的盒模型兼容问题就是关于背景（BackGround）其中 IE6 和 IE7 的背景属性并不能包括边框（Border）部分，而 IE8 及其他标准浏览器的背景部分则包含边框部分，这点问题需要在边框（border）和背景（background）同时出现的时候特别注意一下。
为了你的页面代码能足够强壮，最好还是加上这句 DOCTYPE 声明，以告诉浏览器使用标准的盒模型来渲染网页代码，但需要补充的是该 DOCTYPE 仅支持 IE6 及更高版本的 IE 浏览器，对于 IE5 无论是否声明 DOCTYPE 浏览器将都是以 IE 盒模型来渲染页面的，但考虑到 IE5 及旧版 IE 的市场份额可以忽略，本文将不考虑此种情况，如果实在需要兼容 IE5 浏览器，这里建议在同一个盒子上不要同时存在 padding border 和 width height 的属性值，可在外层或内层再嵌套一个盒子来分别做出 padding border 和 width height 的值。
这个说的很实用哦！