引言：在前几天开始的“习奥会"上，双方提出要对彼此关系进行从新定位，创建新型大国关系。国与国之间的定位，靠的是实力和规则，那么，CSS下的盒模型定位规则是什么呢？下面就会作粗鄙的介绍。 浏览器
一， 为何叫它“盒模型”（Box Model ）
在接触CSS之间，哪知道什么叫盒模型，盒子和模型却是常常见到。不过待一看到盒模型本尊，全部疑虑如风消散。中国有句古话，无规矩不成方圆，用在CSS下面，style样式为规，div结构为矩，全部高度长度造成的原始div，都是方的，看到这里，想必不难理解，为何会把这东西叫作盒子了。 spa
二，盒模型的四盘菜
内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具有这些属性。这四个东西，共同组成了盒模型。举个形象可是不太恰当的例子，你和朋友去吃饭，点了一桌子菜，这张放菜的桌子，就叫作盒模型，它的内容(content)是由一个一个盘子、盆子、碗构成的；而这些个盘子盆子之类，又是一个个小的盒模型，桌子的边缘，碗的边缘，都叫作边框(border)；盘子里的菜到盘边，碗里的饭到碗边，盘子碗到桌边的距离，就叫作内边距，也就是填充（padding）；相对的，盘子到碗的距离，就叫作边界（margin）。 .net
二，盒模型的定位
关于盒模型的定位，其实有不少方法，可是主要的仍是position:static|absolute|fixed|relative方式，固然，经常使用的是绝对定位（absolute）和相对定位（relative）方式。 对象
1，咱们看看绝对定位（absolute）
在CSS中使用绝对定位以后，对象就和文档流分离开来，自成一层，不会占用其余同位置div的空间，若是有多个绝对定位层叠的对象，能够用z-index来调整前后顺序，数字越大，等级越靠前。 blog
| 07 |
z-index:1; //此时两个div层叠，使用z-index控制前后顺序，1在2的下面！ |
须要指出的是，就算是绝对定位，其“绝对”二字也是针对父div的，而不是相对于整个浏览器的窗口，因此就算是脱离了文档流独立存在，它也会随着父div的移动而移动其位置。 继承
2，如今再看看相对定位（relative）
和绝对定位不一样，相对定位就至关于引言所说的”新型大国关系“，能够追逐，并列，可是不可层叠。目前美国的综合国力世界第一，可是当中国发力超过以后，世界第一的位置，就是中国了。 文档
若是是绝对定位是脱离文档流而独立，那么相对定位就是偏移出了文档流，始终没有独立出去。就像是老王家有两个孩子，大儿子成家立业，这就叫绝对定位；二儿子还在念书，虽然也是在外面生活，可是始终依附于老王。 get
3，fixed定位
fixed定位大概是具备生活气息的一种定位方式了，打开网页，各类小广告，弹窗，”当即咨询“等，几乎都是使用的fixed定位。这是一种最最最独立的定位方式，绝对在其余任何文档流的上层显示，由于它仅仅相对于浏览器窗口固定本身的位置，因此只要你不关闭浏览器，它就能一直吸引你的眼神。 it
关于盒模型与定位，其实还有不少话要说，譬如说父类继承，浏览器兼容，在这里推荐两篇文章，分别揭晓了前面二者的秘密： io
IE6 的bug：http://my.oschina.net/u/1162572/blog/136833
父类继承与崩塌：http://my.oschina.net/JoeUI/blog/136746