css页面布局 week3学习

网页布局分为四类

一列布局、两列布局、三列布局以及混合布局

一列布局：

通常用于网站首页，例如百度主页、BING主页等等。适合放置图片，单行文字，不适合用于多行文字。一般看到的网页一列布局，都是固定宽度的。设好固定宽度后，默认情况下它是在窗口的左侧，将它水平固定在浏览器窗口中心的方法，一般是为它添加样式（margin 0 auto;）0代表上下方向的，auto代表左右方向的。

自适应宽度和固定宽度的两列布局：

两列自适应，宽度设为百分比形式，可运用浮动（float:left/right）使这两列分别排列在左侧和右侧，在拖动浏览器窗口时，页面会根据我们之前设定的比例自动调这两列的宽度，一般情况下自适应宽度的两列布局很少用，用的比较多的是固定宽度的两列布局，当为这两列自适应的两列布局设定一个父级并且给父级设定一个固定宽度，那么这两列自适应布局就被限制在父级所固定的宽度中了。如果想更切确地控制这两列布局，可以把他们的宽度从百分比形式改成像素形式，可以两个一起分父级宽度大小，从而控制这两列布局的宽度，从未自适应宽度的两列布局也变成了固定宽度的两列布局。

用position定位方法实现三列布局：

三个div平分宽度，三列布局每一列的宽度为33.3%，得到了自适应的三列布局，从而，更多列的布局也可以通过计算得出宽度来实现。当我们想要侧边两列固定宽度而中间的宽度自适应，则将左右两侧的宽度从百分比形式改成像素形式，但此时还采用浮动是无法将他们固定在同一列上，可通过（position：absolute；left：0；）使左侧的列绝对定位在浏览器的左侧，对右侧也是同样地方法让它固定在浏览器的右侧，对中间的块设施margin值（0左侧宽度 0 右侧宽度），要使他们之间出现空隙还可以通过修改margin值来实现。

混合布局：常见的网页几乎都是混合布局，通过对一列布局，两列布局，以及三列布局的改造来实现混合布局。

通过css对各个div进行排列，网页的布局也就完美了。