WEB入门.七 CSS布局模型

学习内容

• 标准文档流
•  流动模型（flow model）
• 浮动模型（float model）
• CSS基本布局

能力目标

• 理解标准文档流
• 使用流动模型实现页面布局
•  使用浮动模型实现页面布局
• 掌握常用CSS布局

本章简介

上一章节讲解了盒子模型以及页面元素定位，理解了绝对定位、相对定位、包含块三者之间的关系以及应用场合。例如：绝对定位的页面元素会脱离标准文档流，通过指定的坐标位置进行定位；相对定位则不脱离标准文档流，只是相对于元素原有的位置进行偏移，不挤压其他页面元素。设计师可以通过定位盒子来完成基本的页面布局设计。但是盒子模型在大型的门户网站页面设计中只能处理版块之间的关系，不能够适应复杂的页面排版需要，例如布局不能随页面大小自适应等。本章将介绍另外两种布局模型——流动模型和浮动模型。流动模型可以利用网页标准文档流的顺序自动布局，浮动模型可以设置元素的浮动方向。本章将介绍如何在盒子模型的基础上，使用盒子模型来设计出适应多种行业应用的复杂页面布局，如网易、淘宝等门户网站的页面布局。 

 

核心技能部分

3.1 标准文档流

在Web 系统中，浏览器扮演着客户端的角色，可以读取从服务器端传输出来的数据。在接收过程中，浏览器按读取的先后顺序解析数据。浏览器的标准文档流可以保证客户端从服务器端所读取的页面元素排列一致，使文档元素接原始设计的顺序显示。

文档流是浏览器解析网页中的一个重要概念，是浏览器通往服务器端的一个管道；浏览器从文档流中读取数据，并按照先后顺序进行解析。

3.1 流动模型

3.1.1      流动模型概述

流动模型的概念来源于水的流动原理。在显示网页内容时，元素按照从左至右、自上而下的顺序动态分布，如需改变它在网页中的位置，只能通过修改网页结构中元素排列的先后顺序和分布位置来实现。同时，流动模型中的每个元素都是可以改变的，在某个元素前插入一个新元素时，该元素本身及其后元素的位置将自然地向后顺序推移。

流动布局模型是默认状态下网页的布局模型。在没有具体定义position：absolute；或position：fixed；属性以及没有定义浮动float：left；或 float：right；元素的情况下，网页将默认呈现流动布局模型。

块状元素会在其所处的包含元素内按照自上而下的顺序垂直延伸分布，因为默认状态下的块状元素宽度为 100%。实际上，块状元素都会以行的形式占据位置，不管这个元素所包含的内容有多少，也不管把元素的宽度设置多窄。

3.1

CSS代码：

XHTML代码片段：

Box1

Box2

标题元素

段落元素

New Roman"'>系统中，浏览器扮演着客户端的角色，可以读取从服务器端传输出来的数据。在接收过程中，浏览器按读取的先后顺序解析数据。浏览器的标准文档流可以保证客户端从服务器端所读取的页面元素排列一致，使文档元素接原始设计的顺序显示。文档流是浏览器解析网页中的一个重要概念，是浏览器通往服务器端的一个管道；浏览器从文档流中读取数据，并按照先后顺序进行解析。

行内元素会在所处的包含元素内由左向右水平分布。有人将这种分布方式称为文本流，源于文本由左向右地自然流动，它在本质上与 HTTP传输方式和浏览器的解析机制密切相关。文本超出一行时会自动换行显示，然后继续由左向右按顺序依次流动，以此类推。

3.2

CSS代码：

XHTML代码片段：

国际新闻

体育新闻

百度

3.1.1      相对定位流动

当定义元素为相对定位即设置属性position:relative; 时，元素也将遵循流动模型的规则；随HTML文档流从左至右、自上而下流动。相对定位的元素不会脱离标准文档流，同时对其它同级元素不会产生任何影响。

3.3

CSS代码：

XHTML代码片段：

block1

block2

这里需要注意的是，当相对定位元素偏移后，它的原位置区域保持不变，其他元素也不会通过流动填充该元素偏移前的位置。所谓的相对，仅指元素本身位置，对其他元素不会产生任何影响。因此，采用相对定位的元素被定义偏移位置后，不会挤占其他元素的位置，但能覆盖其他元素。

3.3

3.1 浮动模型

3.1.1      为什么需要浮动模型

3.4

       

网站LOGO

       

当前日期

         搜索栏

“网站LOGO” 块与“当前日期”块、“搜索栏”块将分别独占一行显示，并没有实现如图3.1.5所期望的效果。究其原因是由于

属于块状元素，块状元素具有独占一行显示的特点。那么，如何实现如图3.1.5所示的三个div块状元素在一行显示呢？那就是浮动模型的魅力。在三个div的CSS样式中添加“float：left”即可实现。

3.5

CSS代码片段：

.logo{

    width:30%;

    background-color:#0FC;

    float:left;/*添加浮动属性*/

}

.today{

    width:30%;

    background-color:#CCC;

    float:left;

}

.search{

    width:35%;

    background-color:#CF9;

    float:left;

}

3.1.1      什么是浮动模型

浮动是 CSS 的一个用于定位属性。印刷布局中，文本按照需要围绕图片排版，这种布局方式一般被称为“文字环绕”，如图 3.1.8所示。

图3.1.8  印刷布局格式—文字环绕

在网页设计中，应用 CSS 中 float属性的页面元素相当于印刷布局中被文字环绕的图片，浮动图片仍然是文档流的一部分。这与使用绝对定位的页面元素相比有明显不同。绝对定位的页面元素被完全从文档流中移除，图片出现在文字的上方，其元素不会影响其他元素。浮动定位的元素仍留在文档流中。设置元素浮动的语法：

#container{

float:value;

}

float属性有四个可用的值：

left和right：浮动元素到各自的方向

none：默认的，元素不浮动

inherit：从父级元素获取 float值

3.1.2      浮动模型的特征

1.      任何定义为float的元素会自动地被设置为块状元素显示，相当于定义了display:block;声明。可以设置其width 和 height属性，即使是行内元素。块状元素设置浮动后则失去“独占一行”的特征。

3.6

CSS代码片段：

XHTML代码片段：

行内元素流动显示

   

行内元素浮动显示

在浏览器中的运行结果如图 3.1.9所示。

图3.1.9 浮动模型特征

       当第2个span元素被定义为浮动之后，该元素自动以块状显示，因此为span元素定义的宽和高属性值有效。而第1个元素由于是行内元素且没有浮动显示，所以定义的宽和高无效。

2. 浮动模型与流动模型不冲突。当元素被定义为浮动布局时，在垂直方向上它与未被定义为浮动时的位置一样；但在水平方向上，它将最大程度地靠近包含元素边缘。

3. 与普通元素相同，浮动元素始终在包含元素之内游离，也不会破坏元素的包含关系。

3.7

CSS代码片段：

XHTML代码片段：

    行内元素流动显示

       

   

    行内元素浮动显示

在浏览器中的运行结果如图 3.1.10所示。

图3.1.10 浮动模型的特征

3.1.3      浮动塌陷

使用浮动(float)的一个比较疑惑的事情在于它们如何影响与之有包含关系的父级元素。若父级元素只包含浮动元素，则其高度塌陷为零。若父级元素不包含任何的可见背景，则该问题难以被发现，如图 1.3.11所示。

3.8

CSS代码片段：

XHTML代码片段：

   

       Son1

       

Son2

   

在浏览器中的运行结果如图 3.1.11所示。

图3.1.11  浮动塌陷

3.1.4      浮动清除

浮动的自由性给布局带来很多麻烦，浮动塌陷是最典型的问题。为解决这一系列问题，CSS 提供了以下几种清除浮动的方式：

1.        clear属性

该属性在一定程度上控制浮动布局中的混乱现象。属性取值包括：

left：清除左边的浮动对象，清除后，当前元素显示在浮动对象下方。

right：清除右边的浮动对象，清除后，当前元素显示在浮动对象下方。

both：清除左右两边的浮动对象，无论哪边存在浮动对象，当前元素均显示在浮动对象下方。  

 none：默认值，允许两边有浮动对象，当前元素、浮动元素不会换行显示。

#container{

clear =value ;

}

3.9

CSS代码片段：

XHTML代码片段：

    DIV1

    DIV2

    DIV3