DIV+CSS布局入门教程

1、css中的定位机制，普通、浮动和定位。普通也就是元素之间从上到下的依次排列。而浮动会元素往浮动方向靠，靠的意思是他会浮动到一个有块属性元素的边上，普通元素会被浮动的元素挤开。定位更厉害，分绝对和相对。绝对的定位要相应在拥有相对定位的属性的元素中。

2、然后就是盒子模型。

盒子模型—网页布局的基石,由4部分组成

边框（border）

外边距（margin） 

内边距（padding）

盒子中的内容（content）

css3的阴影也能给盒子表现出一种外边样式，但他不计入占位。

尺寸计算：

盒子模型尺寸=边框+外边距+内边距+盒子中的内容尺寸

一个div的边框为3px，内边距为2px，右外边距为10px，往它的内部插入一张宽度为120px的图片，该div的宽度是多少？

div宽度=2xborder+2xpadding+margin+图片宽度=140px

3、学习了上面的知识，就可以开始动手布局了。

网页布局的基础，也是最常见的布局方式之一

主要应用技能

标准文档流

块级元素

margin属性

设置自动居中

下图列出常用几种布局方式的搭配手段。

4、 网页布局最常见的方式之一

 主要应用技能

float属性—使纵向排列的块级元素，横向排列

margin属性—设置两列之间的间距

5、还有一种是通过多列实现。

 能够实现横向多列布局及较为复杂的定位

 通过设置position属性实现

 拥有3种定位形式：1.静态定位、2.相对定位、3.绝对定位

 可设置4个属性值

 static（静态定位）

 relative（相对定位）

 absolute（绝对定位）

 fixed（固定定位）

6、作为入门了解，这里给出两张能提供想像的参考图。