HTML与CSS教学-第十一章 使用CSS样式完成网页布局

 

第十一章 使用CSS样式完成网页布局
本章要点
网页居中的实现方式
基于FLOAT的网页布局的实现方式
图文混排复杂布局的的实现方式

目录：
11.1  CSS网页布局介绍
11.2  网页居中
11.3  基于FLOAT的网页布局
11.4  复杂布局

11.1  CSS网页布局介绍
1. CSS网页布局的意义
用CSS进行网页布局使网站的信息更丰富、网页表现更美观，意义体现在如下方面：
 
（1）使页面载入得更快
（2）修改设计时更有效率
（3）保持一致性
（4）对浏览者和浏览器更具亲和力

2. CSS盒模型
W3C组织建议把所有网页上的对象都放在一个盒(box)中，可以通过创建定义来控制这个盒的属性。盒模型主要定义四个区域：内容(content)、填充(padding)、边界(border)和边距(margin)。margin，padding，content，border之间的层次相互影响。

3. CSS网页布局的基本思路
用CSS进行网页布局时，主要考虑的是页面内容的语义和结构，因为一个用CSS控制的网页，在做好网页后，还可以轻松的调整网页风格。用CSS进行布局的一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。

11.2  网页居中 
1.自动空白边居中设计
以固定宽度的一列布局代码为例，为其增加居中的CSS样式，主要是要对margin属性进行设置：
margin:0px auto;
margin属性用于控制对象的上、右、下、左四个方向的外边距，当margin使用两个参数时，第一个参数表示上下边距，第二个参数表示左右边距。

2.定位居中设计
使用自动空白边进行居中的方法是最常用的，但也可以使用定位和负值空白边来实现居中对齐的效果。
首先定义容器的宽度。
然后将容器的position属性设置为absolute，将left属性设置为50%。这会把容器的左边缘定位在页面的中间，但需要的是让容器居中。所以需要对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半，这会把容器向左边移动它的宽度的一半，从而让它在页面上居中。

11.3  基于FLOAT的网页布局 
基于float的网页布局是设定希望定位的元素的宽度，然后将它们向左或向右浮动。因为浮动的元素不再占据文档流中的空间，就不再对包围它们的边框产生影响，因此需要对布局中各个点上的浮动元素进行清理。

1. 两列布局 
要想使用float创建两列布局，首先需要有一个基本的框架。在下面的示例中，HTML页面由头部区域、主页面区域和的页脚组成。其中主页面区域分成左右两列，左列用作导航页面，右列用作显示页面。主页面区域就是用float实现的两列布局。整个设计放置在一个div中，这个div使用前面介绍的方法进行水平居中。

2. 多列布局 
一种方法是在设置两列布局时，左右两列的宽带之和不占满整个父容器，然后再放入第三列，会浮动到空余的空间，就是中间位置，这样就可以实现三列布局了。

另外一种方法是在刚才两列布局中的右边列的div中再添加firstright和secondright这两个新的div，将右边列再分成两列。
 接着可以使用与两列布局相同的样式进行设置，即为新增加的每个列设置相应的宽度和高度，然后将firstright列向左浮动，将secondright列向右浮动。本质上就是将右边的列再分成两列，形成三列的效果。

11.4  复杂布局
1. 动态布局
动态布局时，主体部分尺寸是用百分数而不是像素设置的，因此可以自适应用户的分辨率。这使动态布局能够相对于浏览器窗口进行伸缩。随着浏览器窗口变大，列变宽。相反。随着窗口变小，列的宽度减小。合适的动态布局，会使页面在大屏幕、小屏幕上都能得到良好的表现。

2. 弹性布局
弹性布局用相对字号来设置元素的宽度。使用em为单位设置宽度，可以确保在字号增加时整个布局随之扩大。这可以将行长保持在可阅读的范围。应用恰当的弹性布局对用户十分友好，页面中所有元素可以缩放。

3. 动态-弹性混合布局
可以组合弹性和动态技术来创建混合布局。这种混合方式以em设置宽度，然后用百分数设置最大宽度。在支持max-width的浏览器上，这个布局将随着字号伸缩，但是决不会超过窗口的宽度。

4. 动态和弹性图像
如果选择使用动态或弹性布局，那么固定宽度的图像就会对设计产生的影响。当布局的宽度减小时，图像会移动，可能相互产生影响，图像会以自然的最小宽度显示，从而影响某些元素的尺寸减小。有些图像会超出包含它们的元素，从而破坏调整过的设计。有几个办法可以避免这些问题。
 
（1）对于需要跨越大区域的图像，可以考虑使用背景图像而不是图像元素。
（2）如果图像需要作为页面上的图像元素，那么将容器元素的宽度设置为100%并且将overflow属性设置为hidden。
（3）可以将图像元素添加到没有设置任何尺寸的页面上。然后设置图像的百分数宽度，并且添加与图像宽度相同的max-width以避免像素失真(pixelization) 。

5. 伪列布局
伪列布局方法是在一个父层的元素(比如一个容器div)上应用重复的背景图像，这个背景图就是为了体现左侧层的高度，因为父对象是会被高的那一列撑高的。faux列这个术语来描述这种技术。

对于固定宽度的两列布局，只需在容器元素上应用一个垂直重复的背景图像，其宽度与left列相同，但是，这一次重复的背景图像需要跨越容器的整个宽度，其中包含两列。按照与前面一样的方式应用这个图像，就会形成faux三列效果。