如果用css来实现网页布局

1.在css中有三种基本的定位机制：

1.普通文档流

2.浮动

3.定位

2.定位的话又可以分为两种：

1.绝对定位

2.相对定位

3.普通文档流：是指不使用其他的与排列和定位相关的特殊css规则时，各种元素的排列顺序。(默认是从上向下依次排列的)

1.块级元素以块的形式表现出来，并且和同级的元素依次竖直排列。

2.行内元素就和其他的元素共占一行。

4.普通文档流也可以被称为标准文档流。

5.浮动：

如果对一个元素设置了浮动，那么这个元素就会浮动起来，他后面的元素就会占据该元素原本的位置。并且后面元素的内容会被挤压出来。

常见的浮动属性：

1.float:left/right/none(将浮动元素移动到父元素的左边或者右边)

2.clear:both/left/right(设置清除浮动影响即如果后面的元素不想去占用被设置浮动的元素的位置，则可以对后面的元素设置clear属性)

3.一般情况下，直接设置clear:both属性

6.注意：设置了浮动的元素就会自动转化为块级元素，加了浮动的元素是没有宽和高的并且其父元素的高度也会塌陷，因为加了浮动的元素的宽和高是根据元素的内容动态设定的。需要自己再写高度。

7.解决父元素高度塌陷的办法：

1.给父元素也加上高度

2.给父元素也设置浮动(一般并不会用这种方法)

8.设置浮动的时候一般会遇到这几种情况：

1.给多个元素都设置左浮动，那么被设置左浮动的元素会依次从左向右展示(前提条件是所有设置左浮动的元素的总宽度不会超过父元素的宽度，否则的话就会在下一行显示)。

2.给元素一个设置左浮动一个设置右浮动，这种情况就是网页中很常见的两列布局样式，一个在左边一个在右边。

3.给一个元素设置左浮动的情况时，一般会出现在图文混排。

 4.给一个元素设置右浮动，，没怎么见过。

9.设置浮动的话就会脱离了原本的标准文档流，一般情况下网页主体的布局都是用元素浮动实现的：

1.两列

2.三列

10. 给元素设置浮动最常用的情况时在设置顶部的导航栏的时候，这种情况下一般都是给li元素设置左浮动就可以了，不过需要注意一点：一般情况下我们的导航栏都是可以超链接的，所以这时候要注意a标签的使用，因为a便签时行内元素，没有宽和高。某些情况下我们需要使用dispaly:block来将a标签设置为块级元素让其具有其父元素的高度。

ok,今天就先更新这些。后面继续。