精通css（3） 盒模型，定位，浮动

终于到了css最重要的3个部分：盒模型，定位，浮动。先讲盒模型吧。

1.盒模型概述

页面上的每个元素都被看成一个矩形框。这个框由元素的内容、内边距、边框和外边距组成。

内边距、边框和外边距都是可选的默认为0。但是许多元素由用户代理样式表设置外边距和内边距。所以不见的一定是0。

在css中，width和height是指内容区域的宽度和高度，对边距没有影响。所以增加width/height/内容/边框/内外边距中的任何一个都会使盒子变大。值得高兴的是，IE6在混杂模式的使用的是非标准的盒模型。他的width不是内容的宽度，而是内容+内边距+边框的总宽度。

1.1外边距叠加

外边距叠加条件：只有普通文档流中块框的垂直外边距才会发生叠加。行内框，浮动框，绝对定位框的外边距都不会叠加。外边距叠加有3类：

当两个或更多垂直外边距相遇时，大的外边距会包含小的外边距。这个外边距的总和等于两个叠加者中外边距较大者；

当一个元素包含在另外一个元素中时，他们的顶外边距也会叠加；

如果给一个空元素设置外边距，那么顶外边距和底外边距就会叠加：

2.可视化格式模型

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。因此，修改行内框尺寸的唯一方法是修改行高或者水平边距。

顺便说一下display属性

display:

display：none将元素隐藏起来,visible:hidden也是隐藏元素，但二者有区别：前者不占用空间，而后者虽然看不见，但还是占着地方！

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。IE6,7不支持inline-block属性，但是可以触发块元素。解决方法是先设置inline-block触发块元素，具有layout的特性，然后设置display:inline，使块元素呈现内联元素，此时layout的特性不会消失；或者直接设置display：inline，然后使用zoom：1触发layout。下面是通用做法：

[plain] view plaincopy
{  
display:inline-block;  
display:inline;  
zoom:1;  
}  

3.定位

先说一下position属性:

绝对定位（absolute）：要注意的是绝对定位元素的位置与文档流无关，因此不占据空间！就好比普通流中的元素看不见他，但是我们看的见！

固定定位（fixed）：绝对定位的一种，区别上面说了（fixed相对浏览器窗口定位，absolute相对第一个非static父元素定位）。不过高兴的是，IE6不支持固定定位，IE7部分支持，但有许多bug。

相对定位：相对于普通流中正常位置位移，但是元素仍然占据原来的空间，所以移动元素可能会覆盖其他框。

4.浮动

浮动的框可以左右移动，直到它的外边缘碰到包含框或另外一个浮动框边缘。浮动不在文档的普通流中。

有浮动就可能会要clear清浮，以下是clear属性:

清浮常用伪类的方法：

[plain] view plaincopy

1. .clearfix:after {  
2.        content: ".";  
3.        visibility: hidden;  
4.        display: block;  
5.        height: 0;  
6.        clear: both;  
7.    }  

这个方法在IE6，7下有bug，需要给浮动块添加haslayout来撑高：

[plain] view plaincopy

1. .clearfix {  
2.  zoom:1;  
3. }  

还可以用overflow：hidden属性。因为overflow会迫使父元素贴紧其内对象的内容，从而达到清浮的作用，但也可能触发滑动条或者隐藏内容。

浮动的具体说明参考w3c：http://www.w3school.com.cn/css/css_positioning_floating.asp

理论的东西就先讲这些吧，接下来开始实践了！