这些概念控制在页面上安排和显示元素的方式
1.框模型
他指定元素如何显示和如何相互交互，
页面上的每个元素被看作一个矩形框，这个框由元素的内容、填充、边框和空白边组成
填充出现在内容区域的周围，若在元素上添加背景，那么背景会出现在内容和填充组成的区域
因此，常常使用填充在内容周围创建一个隔离带，使内容不会和背景混在一起
添加边框会在填充区域外加一条边，可是实现、虚线或点线
边框外面是空白边，空白边是透明的，一般使用它控制元素之间的距离
填充、边框和空白边都是可选的，默认值是0
空白边：margin
填充： padding
边框： border
CSS中width和height是指内容的宽和高，而元素的总宽高为：内容宽高+空白边*2+填充*2
注：但在IE5.x和IE6中使用非标准模型，这些浏览器中width属性不是内容的宽度，而是内容、填充和边框的总和，
对这些浏览器，目前的解决方案，最好还是在其父元素和子元素中设置
1.1空白边的叠加
当空白边相遇时，它们形成一个空白边，这个空白边的高度等于发生叠加的两个空白边的高度值的较大者
并列元素叠加（单边叠加），
包含元素叠加（它们的顶和或底边也发生叠加）
空元素的自身空白边也会叠加
注：只有普通文档流中快框的垂直空白边才会发生空白边叠加，行内框、浮动框和绝对定位框之间的空白边是不会叠加的
2.定位
视觉格式化模型和定位模型一起控制着如何在页面中布置每个元素
2.1视觉格式化模型
p,h1或div等常称为块级元素，即“块框”
strong、span等元素称为行内元素，即“行内框”
可以使用display属性改变生成的框的类型
display：block（可以使行内元素表现的像块级元素一样）
display：none（让生成的元素根本没有框，这样，这个框及其框的内容就不再显示，不占用文档中的空间）
CSS中有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位，普通流中元素框的位置由元素在html中的位置决定。
2.2相对定位
可以通过position：relative对其进行相对定位
相对于其本应该所在的位置（普通流中的位置）的相对位置
使用相对定位时，无论移动与否，都会占据原来的空间，因此，移动元素会导致覆盖其他框
#myBox{
position:relative;
left:20px;
top:20px;
}
2.3绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间，普通流中将不会存在绝对定位元素的位置和空间
绝对定位的元素的位置相对于最近的已定位的祖先元素，若元素没有已定位的祖先元素，那么它的位置相对于最初的包含块
因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖相对定位的元素
可以设置z-index属性来控制这些框的堆放的次序，z-index值越高，框在堆中的位置就越高
注：相对于相对定位的祖先元素对框进行绝对定位，在大多数浏览器中支持的很好，但在IE5.x和IE6中，如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸，如果没有IE就会相对于画布定位这个框。
固定定位
是绝对定位中的一个子类别，差异在于固定元素的包含块是视口。
这是我们能够创建总是出现在窗口固定位置的浮动元素，无论页面是否滚动，该元素的位置不会改变。
注：IE6和更低版本中不支持这一方式
2.4浮动
浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。
因为浮动框不在文档的普通流中，所以文档的普通流中的快框表现的就像浮动框不存在一样