Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务11-元素的浮动课件.pptx

1、任务11 元素的浮动第五单元 盒子模型学习目标清除浮动元素的类型及转换overflow属性元素的浮动掌握元素浮动在网页布局中的作用了解:学习目标任务目标实战演练制作网站导航条任务目标强化训练制作浪漫花语百科网知识准备1.元素的类型：行内（inline）元素n 行内（inline）元素：不占有独立的一行 完全不支持盒子模型 一般不可以设置行内元素的宽度、高度、对齐等属性 宽度和高度由其内容来决定，内容多宽占多宽n 如：、等。知识准备1.元素的类型：块（block）元素n 块（block）元素：占有一行或多行 完全支持盒子模型 可以设置块元素的宽度、高度、对齐等属性n 如：、等。知识准备1.元素的

2、类型：行内块（inline-block）元素n 行内块（inline-block）元素：不占有独立的一行 支持部分盒子模型 可以设置块元素的宽度、高度、对齐等属性n 如：、等。知识准备2.元素类型的转换n 选择器display:属性值;n 属性有四个值：inline：将元素转换成行内元素。block：将元素转换成块元素。inline-block：将元素转换成行内块元素。none：将元素隐藏，不占据页面空间。知识准备示例：元素类型的转换 a border:1px solid#00f;display:block;/*行内元素转换成块元素*/width:500px;height:50px;p bor

3、der:1px solid#00f;display:inline;/*块元素转换成行内元素*/width:500px;height:50px;行内元素转换成块元素 行内元素转换成块元素 行内元素转换成块元素 块元素转换成行内元素 块元素转换成行内元素 块元素转换成行内元素知识准备3.overflow属性 在盒子模型中，当盒子内的内容超出盒子的大小时，就会产生溢出现象。我们可以对超出的内容使用overflow属性进行设置。n 语法规则：选择器overflow:属性值;n 属性有四个值：visible：默认值，内容显示在盒子框外hidden：将超出的内容隐藏scroll：始终出现滚动条auto：根

4、据实际情况作出调整，如果没有超出就正常显示，否则将会出现滚动条知识准备示例：overflow属性overflow:visibleoverflow:hiddenoverflow:scrolloverflow:auto知识准备4.元素的浮动n 元素浮动：改变普通文档流的排列方式，使得块元素在同一行中排列，让网页布局更加方便。n 语法规则：选择器float:属性值;n 属性有三个值：none：默认值，表示元素不浮动left：左浮动right：右浮动左浮动元素运动轨迹右浮动元素运动轨迹知识准备n 浮动原则：有浮动属性的元素肯定会移动，但未必会改变原来的位置。有浮动属性的元素是脱离原有文档流的。如果上一

5、行没有浮动元素，那么下一行的浮动元素是移动不上去的。非浮动元素会忽略掉它前面的浮动元素，取代其前面浮动元素的位置。4.元素的浮动知识准备示例：元素的浮动 *margin:0px;padding:0px;div width:150px;height:50px;#box1 background-color:red;float:left;#box2 background-color:blue;float:left;#box3 background-color:green;float:left;box1 box2 box3float:right;float:right;float:right;知识准备

6、示例：元素的浮动 *margin:0px;padding:0px;div width:150px;height:50px;#box1 background-color:red;float:left;#box2 background-color:blue;width:250px;height:150px;#box3 background-color:green;box1 box2 box3float:left;float:left;知识准备5.清除浮动n 清除浮动：避免浮动元素对其他元素产生的影响n 语法规则：选择器clear:属性值;n 属性有三个值：left：清除左浮动的影响right：清除

7、右浮动的影响both：同时清除左右两侧浮动的影响知识准备示例：清除浮动 .father background-color:#c0c0c0;border:1px dashed#666;.box1,.box2,.box3 line-height:40px;background-color:#9F6;margin:15px;height:40px;padding:0px 10px;border:1px solid#999;float:left;p background-color:#CCF;border:1px dashed#C0F;margin:15px;padding-top:0px 10px;

8、box1 box2 box3 为什么要清除浮动？如果网页元素设置了浮动属性，那么该元素就会脱离文档流，不再占据原来的位置，与其相邻的其他固定元素也会受其浮动属性的影响，从而产生位置上的变化。为了避免浮动元素对其他元素产生的影响，就需要清除浮动。如何清除浮动？可以设置clear属性，即clear:left清除左浮动的影响，clear:right清除右浮动的影响，clear:both同时清除左、右两侧浮动的影响。clear:left;/*清除左浮动*/知识准备示例：清除特殊浮动 .father background-color:#c0c0c0;border:1px dashed#666;.box1

9、,.box2,.box3 line-height:40px;background-color:#9F6;margin:15px;height:40px;padding:0px 10px;border:1px solid#999;float:left;box1 box2 box3 不能清除浮动？clear:left;知识准备示例：使用空标记清除浮动 .father background-color:#c0c0c0;border:1px dashed#666;.box1,.box2,.box3 line-height:40px;background-color:#9F6;margin:15px;h

10、eight:40px;padding:0px 10px;border:1px solid#999;float:left;.box4 clear:left;box1 box2 box3 知识准备示例：使用overflow属性清除浮动 .father background-color:#c0c0c0;border:1px dashed#666;.box1,.box2,.box3 line-height:40px;background-color:#9F6;margin:15px;height:40px;padding:0px 10px;border:1px solid#999;float:left;box1 box2 box3overflow:hidden;实战演练 案例描述：设计并制作网站导航条，网页效果如下图1所示。当鼠标移动到每个菜单选项上时，选项的背景颜色将会发生变化，效果如图2所示。制作网站导航条图1图2强化训练案例描述：设计并制作浪漫花语百科网，网页效果和布局图如下。制作浪漫花语百科网任务小结01元素的类型及转换02overflow属性03元素的浮动04清除浮动课后实训 设计并制作学院网站，效果如图1所示，当光标移动到网站导航上时，效果如图2所示。网页布局可参考图3。图1图2图3谢谢观看