可以把HTML页面中的元素看作是一个矩形的盒子（装内容的容器），每个矩形都由元素的内容、内边距padding、边框border和外边距margin组成。
看下面的代码：
设置一个长宽200像素的盒子
代码效果如下：
盒子模型一般分为两种：IE盒模型（又称怪异盒模型）和标准盒模型
css3中可以通过box-sizing来指定盒模型，如下：
可以通过代码的方式实现，直观两种类型的差异
代码
效果图
其实，网页布局的本质：把网页元素（文字、图片等），放入到盒子里面，然后利用css摆放盒子的过程。
css的定位机制有3种：普通流（亦称 标准流或文档流）、浮动和定位。
所谓文档流，实际上就是一个网页内标签元素从上到下，从左到右的排列顺序。比如块级元素会独占一行，行内元素会按顺序依次前后排列，按照这种大前提的布局排列之下 不会出现例外的情况 叫做标准流布局。
