WEB入门.七 CSS布局模型

学习内容

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

能力目标

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

本章简介

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

</body>

3.1.1 相对定位流动

<ahref="#" class="menu">日志</a>

<ahref="#" class="menu">相册</a>

<ahref="#" class="menu">留言</a>

<ahref="#" class="menu">关于</a>

<divid="clear"></div>

</div>

<p>    【宋】苏轼<br>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒, 起舞弄清影，何似在人间。</p>

<p>    转朱阁，抵绮户，照无眠。不应有恨，何事偏向别时圆。人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>

</div>

</body>

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

图3.1.13 空div的应用

3. overflow属性

若父元素的 overflow属性设置为 auto 或 hidden，则父元素会以包含浮动扩展。该方法有良好的语义性，原因是它不需要额外元素。

3.11

CSS代码片段：

#father{

border:5px solid darkblue;

background-color:lightblue;

width:600px;

overflow:hidden;/*overflow属性的hidden值可以清除，auto值也可以清除*/

}

#son_1{

border:1pxsolid darkgreen;

background:lightgreen;

width:200px;

height:200px;

float:right;

}

#son_2{

border:1pxsolid #000;

background:pink;

width:200px;

height:200px;

float:left;

}

</style>

XHTML代码片段：

<body>

<divid="father">

<divid="son_1"></div>

<divid="son_2"></div>

</div>

</body>

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

图3.1.14 overflow属性

3.2 CSS基本布局

<ul>

<li><ahref="#" title="特惠商品">特惠商品</a></li>

<span><ahref="#">母婴用品推荐</a></span>     </p>

<li>·<a href="#">多美滋金装多学1加幼儿配方奶...</a></li>

<li>·<a href="#">多美滋金装多学1加幼儿配方奶...</a></li>

<li>·<a href="#">托马斯和朋友动画故事乐园(全...</a></li>

<span><ahref="#">特惠商品</a></span>        </p>

<li>·<a href="#">女童弹力牛仔短裤29码</a></li>

<li>·<a href="#">天鹅绒灰色女童长裤8码</a></li>

<li>·<a href="#">男童蓝色长袖圆领衫3Y</a></li>

              

              

</center>

              

              

<br><br>

<ahref="#z2" class="b2 z" title="图片2"></a>

<ahref="#z4" class="b4 z" title="图片4"></a>

</div>

实训任务4：相册导航区放在浏览区下方

需求说明

在前一阶段基础上，将图片导航区放至图片浏览区底部，效果如图3.2.4所示。

图3.2.4 导航区放底部

提示：

（1）       定义类选择器.clear{clear:both;}。

（2）       在图片浏览区和图片导航区中间添加一个空div标签，实现浮动清除，并解决浮动塌陷问题。

（3）       定义图片导航区上边框：border-top:3px doublegray。

本章总结

（1）本章主要讲解流动模型和浮动模型，以及浮动模型里面的浮动塌陷。

（2）在布局模型中框架布局至关重要。本章把框架的所有属性逐个详细介绍，读者必须详细阅读。

（3）通过本章学习，读者应该对布局做全面了解。这对我们学习起到至关重要的作用。

巩固练习

一、选择题

1、以下选项中，哪些属于页面布局模型（）。

A. 层模型

B. 盒子模型

C. 流动模型

D. 浮动模型

2.以下选项哪些可以实现清除浮动的方式（）。

A. 空div

B. hover伪类选择器

C. clear属性

D. overflow属性

3.以下关于流动模型说法正确的是（）。

A. 流动模型是基于标准文档流的模型

B. 流动模型是布局设计的默认模型

C. 相对定位元素会脱离标准文档流

D. 绝对定位元素始终停留在文档流中

4.以下哪种元素定位方式会脱离标准文档流（）。

A. 绝对定位

B. 相对定位

C. 浮动定位

D. 静态定位

5.以下哪种布局模型会导致元素塌陷（）。

A. 浮动模型

B. 层模型

C. 盒子模型

D. 流动模型

二、操作题

完成当当网图书简介版面设计，效果如3.3.1所示。

图3.3.1    图书简介

提示：

（1）页面布局框架代码：

<div id="content">

<divid="top"></div>

<divid="left"></div>

<divid="right"></div>

</div>

（2）content是整个布局页面；top是水平线以上部分；left是图书封面；right是图书简介。