11-CSS定位.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,第,11,章 CSS定位,2024年12月4日,第,1,页,学习目标,掌握CSS属性position定位,掌握CSS属性float浮动,掌握CSS属性clear清楚浮动,2024/12/4 周三,2024/12/4 周三,定位就是确定元素在网页上的位置，主要通过position来实现定位。浮动也对元素的位置产生影响，因此本周介绍positon和浮动实现元素定位。从本章开始，所有的样式定义采用外部样式表，CSS文件、图片、网页的目录结构如图所示：,11.1 position定位,CSS有三种基本定位机制：普通流、浮动和绝对定位。如果没有指定定位方式，元素将在普通流中定位。,position 属性可以设置 4 种不同类型的定位，其取值如下表：,2024/12/4 周三,11.1 position定位,例11-1演示相对定位与普通流定位的不同。,2024/12/4 周三,11.1 position定位,common.css部分代码（保存在css文件夹中）。,2024/12/4 周三,11.1 position定位,例11-1在浏览器中的浏览效果如下图所示：,2024/12/4 周三,11.1 position定位,定位还可以与伪类结合使用：,2024/12/4 周三,11.1 position定位,绝对定位，相对于其定位祖先元素定位，所谓定位元素就是元素采用了相对定位或绝对定位，次元素就是定位元素。,2024/12/4 周三,11.1 position定位,common2.css部分代码,2024/12/4 周三,11.1 position定位,浏览效果如图所示：,2024/12/4 周三,11.1 position定位,如果父元素是定位元素，则元素将相对父元素定位，如将11-2的类headerman设置为定位元素：,2024/12/4 周三,11.1 position定位,在浏览器中的浏览效果如图所示：,2024/12/4 周三,11.1 position定位,这种定位经常出现在下拉菜单中，例11-3演示用绝对定位实现下拉菜单。（源码参照课本）,例11-3在浏览器中浏览效果如图所示：,2024/12/4 周三,11.1 position定位,可以完善css代码，嵌套列表平时隐藏，当鼠标移动到上一级列表时显示：,2024/12/4 周三,11.1 position定位,完善代码后，平常情况下嵌套列表隐藏如下图：,fixed固定定位，元素将相对于浏览器边框定位，如常用的百度页面，在向下滚动时，搜索框固定在页面顶端，如下图所示：,2024/12/4 周三,11.2 浮动,CSS属性float用于设置浮动，其取值如下表：,浮动能让元素脱离文档流，向左或向右移动。最初浮动用于图片，设置将图片浮动后文字环绕图片。,2024/12/4 周三,11.2 浮动,下面的代码在文字中插入一张图片：,在浏览器中的浏览效果如图所示：,2024/12/4 周三,11.2 浮动,如果设置图片浮动：,则图片将向左浮动到父元素里的最左边，父元素中的文字环绕图片，效果如图：,2024/12/4 周三,11.2 浮动,现在浮动不仅用于图文混排，可以将任意HTML元素设置浮动来达到特定的排版效果。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。下面的例子演示设置div浮动实现布局。,2024/12/4 周三,11.2 浮动,2024/12/4 周三,11.2 浮动,common4.css：,2024/12/4 周三,11.2 浮动,2024/12/4 周三,11.2 浮动,例11-4在浏览器中的浏览效果如图：,2024/12/4 周三,11.2 浮动,从图可以看到，第一个子div向左浮动，遇到父元素边框时停止；第二个子div向左浮动，遇到父元素的边框线，试图移动到上一排，由于第一排剩下的空间足够（600px-1px*2-250px-5px=343px），所以第二个子div移动到第一排遇到第一个子div的边框时停止，此时这两个子div并排排列；第三个div也向左浮动，遇到父元素的边框线是试图向上移动与前面的div位于同一排，但第一排空间不够(600px-1px*4-250px*2-5px*2=86px)，因此第三个div不能移动到上一排，只能位于第二排；其他子div的情况依次类推。,2024/12/4 周三,11.2 浮动,利用浮动的特性，可以给页面布局，如下图所示页面部分，就是通过浮动设置多个div并排排列。,由于浮动框不在文档的普通流中(脱离文档流)，所以文档的普通流中的块框表现得就像浮动框不存在一样。如例11-4中如果类main不设置高度，即将CSS代码,删除，此时例11-4在浏览器中的效果如图所示：,2024/12/4 周三,11.2 浮动,2024/12/4 周三,11.2 浮动,使用浮动后，应该清除浮动。clear 属性规定元素的哪一侧不允许其他浮动元素，取值如表11-3所示。为了避免出现图11-12中情况，可以在最后一个浮动元素后清除浮动，添加清除浮动代码后的主要HTML代码为：,2024/12/4 周三,11.2 浮动,此时的网页浏览效果如图,所示：,2024/12/4 周三,11.2 浮动,课本例11-5演示利用float进行布局，最好清除浮动。（源码参照课本）,在浏览器中的浏览效果如图所示,:,2024/12/4 周三,本章小结,本章介绍了网页中非常重要的定位与浮动，应用此属性能对精确控制网页元素的位置，对网页进行布局。定位与浮动也是网页设计中比较难掌握的知识点，读者在了解相关知识后需要多动手实验，掌握定位与浮动在网页设计中的试卷应用。,2024/12/4 周三,