css网页布局

这篇文章是讲网页布局的一些基础的样式。主要是一列布局，两列布局，三列布局以及混合布局。

网页布局：请大家注意float，position；width这写属性值的变化。

一列布局：比较简单明了，适合少量信息的显示，不适合多行文本。比如说百度搜索

下面看一个一列布局的例子：

一列自适应：随着浏览器窗口的变化而变化

一列固定：不随着窗口的变化而变化，给定了列宽；

相比较之后，我们可以看到：

固定：给定各部分的固定宽高度；

自适应的效果：利用百分比；
两列布局：

1.两列居中固定

2.两列居中自适应

3.两列自适应

三列布局：假如要求左右两列有固定宽度值，中间自适应，此时用float已经不行了；可以用左右绝对定位来实现，中间用margin属性来实现

1.三列自适应

2.三列左右固定

混合布局：

混合布局自适应：

混合布局1（自适应的）；

看了以上的例子，相信就可以知道：只需要将相应块的宽度设置为百分比即可实现。比如下面这种的

混合布局2（固定宽度的）：

将相应块的宽度设置为固定值，1-2-1形式

混合布局03（固定宽度居中的）

1-2(1-2)-1形式

混合布局4：

header和footer分别是屏幕自适应效果，中间的是固定宽度

1-2(1-2)-1形式

总结一下：

固定：给定各部分的固定宽高度；

自适应的效果：利用百分比；

我们要注意宽度以及高度的设定是否与你其他已经设定的块的宽高度相冲突，也就是说，各个块设定时，要符合父元素的宽高。

合理利用float以及position，就可以达到一般的布局的效果。

三列以上的布局并不是很常见