盒模型简介
CSS最基本的功能就是对元素进行定位；而谈定位必谈盒模型，它是定位的基石。
在CSS中；width和height分别指的是元素内容区域的宽和高；对块状元素来说，没有设定高宽，元素按水平/垂直格式化排布；一旦设定width和height；则改变内边距padding，边框border，外边距margin不会影响内容区域的尺寸，而会改变元素的总尺寸。
tip0：设置背景会影响到padding，但不会影响到border和margin；border一般有值，margin一般为祖先元素的背景。
tip1：各个浏览器的默认内外边距不一定相同；因此最好提前将所有的元素的内外边距设置为0：* {margin:0; padding:0;} ，然后再一一设置。
tip2：IE6-在混杂模式中使用的是自己的非标准盒模型，width和height是内容，内边距，边框的高宽之和；随着IE6市场份额减少，现在一般不需要考虑这个兼容问题了
两个元素在垂直方向上相遇时；其相邻的垂直外边距会发生叠加，保留最大的那个。空元素的外边距还会发生自身叠加的现象。
定位-position
类型：static/relative/fixed/absolute
1.static：这个不多说；就是元素框正常生成。
2.relative：在保留原空间，保留原形状的基础上；相对原位置偏移某个距离（具体由top，right，bottom，left属性确定）。
3.fixed：类似absolute，脱离正常文档流，但相对视窗定位。
4.absolute：元素从正常文档流中完全删除，相对其包含块定位；定位后生成块级框（这个块级框的特性有点像inline-block）。
tip3：各种定位的包含块
1.对根元素（html或body）；其包含块由浏览器建立，通常是视窗大小矩形。
2.对非根元素；为relative或static定位，其包含块为最近的块级框，表单元格，或行内块框内容边界构成。
3.对absolute来说；其包含块是最近的非static定位祖先元素【块级祖先元素的边框边界；行内祖先元素的内容边界；根元素的包含块】）
tip4：利用z-index可以改变元素相互覆盖的顺序；该值越大，离用户越近。）
显示-display
常用值：none/inline/block/inline-block/
1.none:隐藏该元素；与visibility：hidden不同的是，它会将该元素从文档流中删除；visibility不会从原位置删除。
2.inline和block就是模仿的行内元素与块级元素。
3.inline-block；该元素会作为替换元素放在行中，可以设置width和height及text-align（行内元素则不行）；在该元素内部会像块级元素一样设置内容的样式；
