《HYLI5教程课件》-《HYLI5教程课件》-第六章 元素的浮动与定位

2021元素的浮动与定位03类型转换02定位布局01浮动目录CONTENT

浮动016.1.1浮动的属性CSS的Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。它允许任何元素的浮动，不论是图像、段落或是列表，无论先前是什么状态，浮动后都成为块级元素，浮动的宽度缺省为auto。属性值功能描述left元素向左浮动right元素向右浮动none元素不浮动(默认值)元素的浮动属性主要是用来进行页面布局，通过float属性来定义元素的浮动，其作用是移动到其父类中指定位置的过程。其基本语法格式为:选择器{float:属性值;}以Box01为设置对象,对其应用左浮动样式,具体CSS代码如下。.Box01{float:left;}设置左浮动的Box01漂浮到了Box02的左侧,也就是说Box01不再受文档流控制,出现在了一个新的层次上。接下来,在上述案例的基础上,继续为Box02设置左浮动,具体CSS代码如下。.Box01,.Box02{float:left;}Box01、Box02、Box03三个盒子整齐地排列在同一行,可见通过应用"float:left;"样式可以使Box01和box2同时脱离标准文档流的控制向左漂浮。接下来,在上述案例的基础上,继续为Box03设置左浮动,具体CSS代码如下。.Box01,.Box02,.Box03{float:left;}需要说明的是，float另一个属性值"right"在网页布局时也会经常用到,它与"left"属性值的用法相同但方向相反。应用了"float:right;"样式的元素将向右侧浮动，读者要学会举一反三。6.1.2浮动的清除属性值功能描述left不允许左侧有浮动元素(清除左侧浮动的影响)right不允许右侧有浮动元素(清除右侧浮动的影响)both同时清除左右两侧浮动的影响如果要避免浮动对其他元素的影响,就需要清除浮动。在CSS中,使用clear属性清除浮动,其基本语法格式如下选择器{clear:属性值;}在上面的语法中,clear属性的常用值有3个,具体如表所示。需要注意的是,clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时,经常遇到一些特殊的浮动影响。例如,对子元素设置浮动时,如果不对其父元素定义高度，则子元素浮动会对父元素产生影响,接下来看看子元素浮动对父元素的影响。实现效果如下图所示。方法一:使用空标记清除浮动在浮动元素之后添加空标记，并对该标记应用“clear:both”样式，可清除元素浮动所产生的影响，这个空标记可以为<div>、<p>、<hr/>等任何标记。下面，在上图的基础上，演示使用空标记清除浮动的方法,实现效果如下图所示。2方法二:使用overflow属性清除浮动对元素应用“overflow:hidden;”样式,也可以清除浮动对该元素的影响,该方法弥补了空标记清除浮动的不足。下面继续在的基础上,演示使用overflow属性清除浮动的方法,实现效果如下图所示。方法三:使用after伪对象清除浮动使用after伪对象也可以清除浮动,但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。使用after伪对象清除浮动时需要注意以下两点。必须为需要清除浮动的元素伪对象设置“height:0；"样式,否则该元素会比其实际高度高出若干像素。必须在伪对象中设置content属性,属性值可以为空,如"content："";"。6.1.3overflow属性overflow属性是CSS中的重要属性。当盒子内的元素超出盒子自身的大小时,内容就会溢出,如果想要处理溢出内容的显示方式,就需要使用overflow属性,其基本语法格式如下。选择器{overflow:属性值;}在上面的语法中,overflow属性的属性值有4个,分别表示不同的含义,具体如表所示。属性值功能描述visible内容不会被修剪,会呈现在元素框之外(默认值)hidden溢出内容会被修剪,并且被修剪的内容是不可见的auto在需要时产生滚动条,即自适应所要显示的内容scroll溢出内容会被修剪,且浏览器会始终显示滚动条overflow:hidden;/*溢出内容被修剪,且不可见*/overflow:auto;/*根据需要产生滚动条*/overflow:scroll;/*始终显示滚动条*/定位布局026.2.1定位布局的属性1.定位模式属性值功能描述static静态定位(默认定位方式)relative相对定位,相对于其原文档流的位置进行定位absolute绝对定位,相对于其上一个已经定位的父元素进行定位fixed固定定位,相对于浏览器窗口进行定位在CSS中,position属性用于定义元素的定位模式,其基本语法格式如下。选择器{position:属性值;}在上面的语法中,position属性的常用值有4个,分别表示不同的定位模式,具体如表6-4所示。从表6-4可以看出,定位的方法有多种,分别为静态定位(static)、相对定位(relative)、绝对定位(absolute)及固定定位(fixed),后面将对它们进行详细讲解。2.边偏移定位模式(position)仅仅用于定义元素以哪种方式定位,并不能确定元素的具体位置。在CSS中,通过边偏移属性top、bottom、left或right来精确定义定位元素的位置,具体解释如表所示。边偏移属性描述top顶端偏移量,定义元素相对于其父元素上边线的距离bottom底部偏移量,定义元素相对于其父元素下边线的距离left左侧偏移量,定义元素相对于其父元素左边线的距离right右侧偏移量,定义元素相对于其父元素右边线的距离position:relative;/*相对定位*/left:50px；/*距左边线50px*/top:10px;/*距顶部边线10px*/定位方式又分成静态定位（static）、相对定位（relative）和绝对定位（absolute）。静态定位static静态定位是元素的默认定位方式,当position属性的取值为static时,可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。任何元素在默认状态下都会以静态定位来确定自己的位置,所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性(top、bottom、lef或right)来改变元素的位置。相对定位relative相对定位是将元素相对于它在标准文档流中的位置进行定位,当position属性的取值为relative时,可以将元素定位于相对位置。对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留。3.绝对定位absolute绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素进行定位，若所有父元素都没有定位,则依据body根元素(浏览器窗口)进行定位。当positon属性的取值为absolute时,可以将元素的定位模式设置为绝对定位。下面在例的基础上,将Box02的定位模式设置为绝对定位,.Box02{position:absolute;/*绝对定位*/left:150Px;/*距左边线150px*/top:100px;/*距顶部边线100px*/}在上面的案例中,对Box02设置了绝对定位,当浏览器窗口放大或缩小时,Box02相对于其直接父元素的位置都将发生变化。当缩小浏览器窗口时,页面将呈现图6-18所示效果，很明显Box02相对于其直接父元素的位置发生了变化。然而在网页中,一般需要子元素相对于其直接父元素的位置保持不变,即子元素依据其直接父元素绝对定位,如果直接父元素不需要定位,该怎么办呢?对于上述情况,可将直接父元素设置为相对定位,但不对其设置偏移量,然后再对子元素应用绝对定位,并通过偏移属性对其进行精确定位。这样父元素既不会失去其空间,同时还能保证子元素依据直接父元素准确定位。四、固定定位fixed固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动,也不管浏览器窗口的大小如何变化,该元素都会始终显示在浏览器窗口的固定位置。但是,由于IE6不支持固定定位,因此,在实际工作中较少使用,本书在这里暂不做详细介绍。【小贴士】注意：Fixed定位在IE7和IE8下需要描述!DOCTYPE才能支持。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。【技能拓展】相对定位：演示如何相对于一个元素的正常位置来对其定位。绝对定位：演示如何使用绝对值来对元素进行定位。固定定位：演示如何相对于浏览器窗口来对元素进行定位。6.2.2层叠等级属性元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）一个元素可以有正数或负数的堆叠顺序：在CSS中,要想调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数、负整数和0。z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。类型转换036.3.1类型分类1.块元素块级元素在页面内以区域块的形式出现，其特点如下：●独自占据一整行或多行●可以对其设置长度、宽度、对齐等属性●可以容纳行内元素和其他元素常见的块元素有<h1>～<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标记是最典型的块元素。2.行内元素行内元素也称为内联元素或内嵌元素，其特点如下：●不会独自占据一行或多行●宽度不可以改变，是它的文字或图片的宽度●设置高度height无效，，要使用line-height来设置●padding、margin只对左右有效，对上下无效●只能容纳文本和其他行内元素常见的行内元素有<strong>、<b>、<em>,<i>、<del>、<s>、<ins>、<u>、<x>,<span>等,其中<span>标记是最典型的行内元素。6.3.2<span>标记与<div>一样,<span>也作为容器标记被广泛应用在HTML语言中。和<div>标记不同的<span>是行内元素,<span>与</span>之间只能包含文本和各种行内标记,如加粗标记<strong>、倾斜标记<em>等,<span>中还可以嵌套多<span>。<span>标记常用于定义网页中某些特殊显示的文本,配合class属性使用。它本身没有固定的格式表现,只有应用样式时,才会产生视觉上的变化。当其他行内标记都不合适时,就可以使用<span>标记。6.3.3元素之间转换display属性常用的属性值及含义如下。inline:此元素将显示为行内元素(行内元素默认的display属性值)。block:此元素将显示为块元素(块元素默认的display属性值)。inline-block:此元素将显示为行内块元素,可以对其设置宽高和对齐等属性,但是该元素不会独占一行。none:此元素将被隐藏,不显示,也不占用页面空间,相当于该元素不存在。定义了三对<div>和三对<span>标记,为它们设置相同的宽度、高度、背景颜色和外边距。同时,对前两个<div>应用"display:inline;"样式,使它们从块元素转换为行内元素,对第一个和第三个<span>分别应用"display:inine-block;"和"display:inline;"样式,使它们分别转换为行内块元素和行内元素。.d_three{display:none;}/*隐藏第三个div*/保存HTML页面,刷新网页,效果如图6-25所示。标题内容请替换文字内容，点击添加相关标题文字041234此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）点击输入标题内容关键词关键词关键词标题文本预设此部分内容作为文字排版占位显示，

建议使用主题字体，以保持全文档文本格式的统一

此部分内容作为文字排版占位显示，

建议使用主题字体，以保持全文档文本格式的统一

点击输入标题内容此部分内容作为文字排版占位显示（建议使用主题字体）此部分内容作为文字排版占位显示（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示（建议使用主题字体）标题文本预设标题文本预设此部分内容作为文字排版占位显示（建议使用主题字体）标题文本预设点击输入标题内容标题文本预设标题文本预设标题文本预设标题文本预设标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）标题文本预设此部分内容作为文字排版占位显示

（建议使用主题字体）点击输入标题内容01关键词02关键词05关键词06关键词03关键词04关键词07关键词09关键词08关键词关键词标题文本预设关键词标题文本预设关键词标题文本预设点击输入标题内容标题文本预设标题文本预设1此部分内容作为文字排版占位显示（建议使用