第3章+流动、浮动模型.ppt

* 第三章　流动、浮动模型 本章内容 标准文档流 流动模型（flow model） 浮动模型（float model) CSS基本布局 本章目标 使用流动模型实现页面布局 使用浮动模型实现页面布局 常握常用CSS布局设计 内容回顾 盒子模型由几个部分组成？ 标准 W3C 盒子和IE 盒子模型的区别？ 内容与表现分离的好处？ 简述静态定义、绝对定位、相对定位的特点？ 1. 标准文档流 浏览器扮演客户端的角色，读取从服务器端传输过来的数据 保持页面文档元素的原始顺序 是一个管道，从文档流里读取数据，并按先后顺序进行解析 2.流动模型 什么是流动模型 是基于标准文档流布局模式 除绝对定位、固定定位和浮动元素之外，任何元素将默认为流动布局模式 HTML文档 Flow元素 流动模型 流动模型特征 块状元素会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。 行内元素会在所处的包含元素内从左到右水平分布显示 块状元素 行内元素 问题 在同一个页面中，块状元素和行内元素同时出现在流模型中，元素的分布情况怎样？ 2.1 相对定位流动 遵循流动模型布局规则，跟随HTML文档流自上而下流动 #container{ margin-left:100px; margin-right:100px; border:1px solid gray; } #block1{ position:relative; left:100px; top:10px; width:500px; height:30px; background-color:#CCCC00; } #block2{ width:500px; height:30px; background-color:#CCCCff; } 代码演示 3.浮动模型 3.1 为什么需要浮动模型 在绝对定位模型中，元素的位置是基于包含块的左上角偏移。 绝对定位元素是完全脱文档流 div id=”d” div id=”header”/div div id=”a”/div div id=”a”/div div id=”c”/div div id=”footer”/div /div *{margin:0px;padding:0px;} div{border:1px solid gray;margin:5px} #header{width:auto;height:120px;} #footer{width:auto;height:120px;} #a{width:20%;height:300px;position:absolute;top:140px;left:5px;} #b{width:55%;height:300px;position:absolute;top:140px;left:22%;} #c{width:20%;height:300px;position:absolute;top:140px;right:5px;} 绝对定位　浮动定位 div{border:1px solid gray;margin:3px} #header{width:auto;height:120px;} #footer{width:auto;height:120px;clear:both;} #a{width:20%;height:300px;float:left;} #b{width:55%;height:300px;float:left;} #c{width:20%;height:300px;float:right;} 绝对定位 浮动定位 3.2 什么是浮动模型 浮动是 css 的定位属性 印刷布局中，文本可以按照需要围绕图片，这种方式称为“文字环绕” 3.3 浮动模型特征 任何浮动元素自动被设置成一个块状元素显示 浮动元素在垂直方向上与文档流中的元素位置一致；在水平方向上停靠包含元素边缘 浮动元素不会脱离文档流，始终位于包含元素内 浮动元素 流动元素 文档流 浮动层 流动元素 流动层 3.4 浮动塌陷 若父级元素只包含浮动元素，高度塌陷为零 浮动元素 浮动元素 浮动元素 父级元素高度为零 浮动元素 浮动元素 浮动元素 3.5 浮动清除 CSS提供了几种用于清除浮动的方式: clear属性 空div标签 overflow属性 after伪选择符 浮动清除 clear属性 设置元素左右两侧是否允许有浮动元素 clear属性取值包括四个： left：清除左边的浮动对象。 right：清除右边的浮动对象。 both：清除左右两边的浮动对象。 none：默认值，允许两边都可以有浮动对象。 编写代码，演示cle