前端学习笔记二：稍稍苦手的DIV进阶
昨天学习了div+css的相关基础，用到了margin和float的基础知识，今天将在深入学习这两个知识的同时，学习css盒模型，相对定位，绝对定位的相关基础知识。
首先我们先用昨天的知识来做这么一个东西“两列居中显示”，先看看下面的效果：
如图所示，两个div相邻居中显示在页面上，而且不管怎么拖动浏览器，他们始终都是居中的。
要达到这种效果，用单独的两个div来实现的话，个人觉得不怎么好做，这个时候我们可以用嵌套的div来实现，html代码如下：
html
由上面的代码可以看出来，我们在居中显示的那两个div放在一个id为content的div里面，所以这样，要解决居中两个div的问题就变成了居中id为content的div的问题。那么运用上一章的内容，我们设置content的上下边距为0，左右边距为auto，就可以达到居中的效果，如下：
css
div
{
background:#FFC;
border:1px solid #000;
}
{
width:804px;
height:599px;
margin:0 auto;
}
然后在运用上一章的另外一个例子“两列并排显示”，让content里的两个div并排显示就ok了，当然除此之外我们还要对其宽度和高度做一点手脚，让其能把content占满，并且连个div的宽度相同，代码如下：
css
疑问产生了！content的宽度是804，而里面两个div的宽度是400，804-400-400=4….
等于4啊！混蛋！不是0啊，但是为什么还是满的啊？！！！这是因为，页面中的一个对象，它的大小并不是仅仅由宽和高来定义的，它的大小等于外边距+边框宽度+内边距+对象宽度的和….这个东西是css的一个核心概念，叫做盒模型，后面会细讲。从css代码来分析，我们对div设置了统一的边框宽度，1px，所以content里面的两个div的实际宽度就是2*（400+1+1）=804。刚好能占满，多1像素，就会被挤到下面去了。
好了，上一章的东西巩固完了。下面开始正片。
首先，我们来讲讲css中一个非常重要的概念，css盒模型….Box Model
什么是盒模型，看看w3c的定义：
上图的意思就是说“页面中对象的实际大小，等于外边距+边框+内边距+对象大小的总和”我们实际操作一下，见下面的代码：
html
上面的代码中，我们设置了一个宽高均为300px，外边距均为10像素，内边距均为10像素，边框为1像素的div，那么按照css盒模型的定义，这个对象在页面上所占的宽度应该为10*2（外边距）+1*2（边框）+10*2（内边距）+300（对象宽度）=342，高度同理。那么我们来看看效果，为了更好的能看到效果，我在这里使用了firebug插件，从firebug插件的解析来看，总大小的确是342*342，如下图：
不过盒模型在一定条件是会进行合并的，比如下面的代码：
css
html
我们在页面中放入了两个宽高都是50,背景颜色都是黑色,边距也是50的div。我们看看效果：
我们可以看出来，两个div四边的边距的50像素，说明我们的css代码起了预料中的效果….等等，好像哪点出了问题….不对啊！尼玛两个两个div的上下边距都是50px，所以两个div之间的距离不就是100px了吗，但是这里明显还是50像素….肿么回事？其实这是因为浏览器基于一些乱七八糟的原因（排版美观？）在解析过程中会自动把两个对象的上下边距合并在一起，当然这并不仅仅出现在两个相邻的对象之间，也有可能是下面这些原因（引用自http://hi.baidu.com/dognicole/blog/item/25e0eedd967de7f377c6383a.html）：
1. 水平 margin 不会合并。
2. 两个上下渲染相邻（不一定是兄弟节点）的块状元素在正常页面流情况下会发生 margin 合并。
3. 浮动元素不会和任何元素（包括子孙节点）发生 margin 合并。
4. overflow = visible 的元素不和任何元素发生 margin 合并。
5. 绝对定位的元素不和任何元素发生 margin 合并。
6. inline-block 的元素不和任何元素发生 margin 合并。
7. 设置 clear 属性的元素不和任何元素发生 margin 合并。
8. 根元素不和任何元素发生 margin 合并。
9. 父节点和第一个子节点发生 margin-top 合并。
10. 如果最后一个子节点没有 border 以及 padding ，则和其父节点发生
margin-bottom 合并。
所以到时候根据具体的需求，配以相对较好的解决选择就ok了。
盒模型基本搞定，然后下面就是DIV的绝对定位和相对定位
先来看绝对定位，什么叫绝对定位，我们可以这么想象，把浏览器想象成一个坐标轴，有纵向的y坐标，也有横向的x坐标，然后常规上来说，浏览器是从上往下解析一个html文档的，它会把html中定义的各种对象依次从上到下排列在这个坐标轴内，然后再通过相应的css代码对这些对象进行装饰。但是可能会有这么一个需求，比如我要在页面中做一个弹窗，或者恶心的浮动广告之类，它们都浮在页面其他对象的上面的，而像这样的东西就是用绝对定位或者是相对定位来实现的。我们先看一个效果：
这个效果表明了再a和b的上面叠放了一个叫“guanggao”的div，恩…这里用叠放来形容还是比较恰当。而这里的guanggao就是一个绝对定位的div，要把一个对象设置成绝对定位只需要设置css“position:absolute”就ok了，代码如下：
css
html
从上面的代码可以也可以看出来，一旦将某个对象设置成绝对定位之后，那么浮动模型就不会再起任何作用了。另外，当一个对象为绝对定位时，还需要设置它的坐标，主要是这几个属性（如果没有设定其中至少一个属性，那绝对定位是不会起效的，并且对象依然受浮动模型的控制）：
top（表示离浏览器上面的距离）
left（表示离浏览器左边的距离）
bottom（表示离浏览器下面的距离）
right（表示离浏览器右边的距离）
然后除了这几个属性外，还有一个叫做z-index的属性，它是用来表示对象的深度的，因为当启用绝对定位之后就有对象重叠这样的问题，而重叠的先后顺序，就是谁在上，谁在下，就是通过z-index来决定的，z-index的值为数值型，值越大，对象就在越上面。
然后在来看看相对定位，相对定位相对来说要相对难理解一些，这么说把，绝对定位中，对象是根据浏览器的左上角为参造来进行定位的，而相对定位的话，对象是根据自己本来的位置做参照来进行定位。这里我们把上面的css代码中的position属性值改成relative就ok了，效果应该是下面这个样子：
从上图可以看出来，浮动模型是起效了的，a和b中间的guanggao的占位信息是存在，虽然是一片空白，然后guanggao相对其本来的位置（a和b的中间）向右下角偏移。这就是相对定位….
想要更详细的深入理解可以查看这篇文章：http://hi.baidu.com/zxp609/blog/item/ff2da33d4762dc0cbba167d1.html
