响应式Web开发项目化教程（HTML5+CSS3） 课件 项目5 制作旅游网站的导航栏和banner版块

项目5

制作旅游网站的导航栏和banner版块·元素的浮动属性float

·元素的浮动属性clear

·元素的位置定位属性position·元素的类型转换

学习目标能力知识素质理解元素的浮动；掌握元素的定位的方法；掌握清除浮动的方法；掌握元素转换的方法。1能够为元素设置浮动样式；能够使用不同方法清除浮动；能够为元素设置常见的定位模式2勇于创新、积极探索的职业精神。3目录元素的浮动属性float元素的清除浮动属性clear元素的位置定位属性position5.15.25.3元素的类型转换5.45.1

元素的浮动属性float网页的布局方式：其实就是指浏览器是如何对网页中的元素进行排版的。网页的布局方式有三种：①标准流(文档流/普通流)排版方式

②浮动流排版方式

③定位流排版方式网页的布局方式5.1

元素的浮动属性float标准流(文档流/普通流)排版方式①其实浏览器默认的排版方式就是标准流的排版方式②在CSS中将元素分为三类,分别是块级元素/行内元素/行内块级元素③在标准流中有两种排版方式,一种是垂直排版,一种是水平排版✱垂直排版,如果元素是块级元素,那么就会垂直排版✱水平排版,如果元素是行内元素/行内块级元素,那么就会水平排版5.1

元素的浮动属性float标准流(文档流/普通流)排版方式

div会单独的占领一行,而span不会单独占领一行div是一个容器级的标签,而span是一个文本级的标签◐Div和span标签div作用:一般用于配合css完成网页的基本布局span作用:一般用于配合css修改网页中的一些局部信息◐div和span有什么区别?容器级的标签中可以嵌套其它所有的标签，常见容器级的标签:divhuloldllidtdd...文本级的标签中只能嵌套文字/图片/超链接，常见文本级的标签:spanpbuisstrongeminsdel...◐容器级的标签和文本级的标签的区别?在HTML中HTML将所有的标签分为两类,分别是容器级和文本级在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素(其实还有一类,行内块级元素)5.1

元素的浮动属性float标准流(文档流/普通流)排版方式

·块级元素会独占一行·行内元素不会独占一行常见容器级的标签:divhuloldllidtdd...常见文本级的标签:spanpbuisstongeminsdel...常见块级元素:pdivhuloldllidtdd常见行内元素:spanbuisstrongeminsdel◐什么是块级元素,什么是行内元素?5.1

元素的浮动属性float标准流(文档流/普通流)排版方式◐块级元素和行内元素的区别?块级元素·独占一行·如果没有设置宽度,那么默认和父元素一样宽·如果设置了宽高,那么就按照设置的来显示行内元素·不会独占一行·如果没有设置宽度,那么默认和内容一样宽·行内元素是不可以设置宽度和高度的◐行内块级元素为了能够让元素既能够不独占一行,又可以设置宽度和高度,那么就出现了行内块级元素，行内块级元素不独占一行,但可以设置宽高5.1

元素的浮动属性float浮动流排版方式浮动流是一种"半脱离标准流"的排版方式，浮动流只有一种排版方式,就是水平排版.它只能设置某个元素左对齐或者右对齐注意点:o浮动流中没有居中对齐,也就是没有center这个取值o在浮动流中是不可以使用margin:0auto;特点:o在浮动流中是不区分块级元素/行内元素/行内块级元素的o无论是块级元素/行内元素/行内块级元素都可以水平排版o在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高综上所述,浮动流中的元素和标准流中的行内块级元素很像5.1

元素的浮动属性float定位流排版方式1、静态定位（static）表示按照正常定位方案，元素盒按照在文档流中出现的顺序依次格式化；2、相对定位（relative）将移动元素盒，但是它在文档流中的原始空间会保留下来；3、绝对定位（absolute）是指元素盒彻底从文档流中脱离出来，并相对于其容器块进行定位。因为这些元素从文档流中脱离出来，所以它们不再影响周边元素的布局，并且它们占据的空间不被保存；4、固定定位（fixed）与绝对定位类似，元素从文档流中脱离，但是它们不是相对于容器块定位，而是相对于视口（viewpoint）定位（大多数情况下，这个视口就是指浏览器窗口）。5.1

元素的浮动属性float浏览器在解析网页时是按照标准文档流的顺序进行的，即按照body元素下的任意元素的上下关系进行解析，而float属性则打破了这一解析规则，使浏览器按照我们的布局要求进行解析。所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。浮动流排版方式5.1

元素的浮动属性float浮动流排版方式语法格式选择器{float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）5.1

元素的浮动属性float浮动元素的脱标什么是浮动元素的脱标?o脱标:脱离标准流o当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标浮动元素脱标之后会有什么影响?o如果前面一个元素浮动了,而后面一个元素没有浮动,那么这个时候前面一个元素就会盖住后面一个元素5.1

元素的浮动属性float浮动元素排序规则相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面。5.1

元素的浮动属性float浮动元素排序规则不同方向上的浮动元素,左浮动会找左浮动,右浮动会找右浮动。5.1

元素的浮动属性float浮动元素排序规则浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来确定。5.1

元素的浮动属性float浮动元素贴靠现象✹如果父元素的宽度能够显示所有浮动元素,那么浮动的元素会并排显示。5.1

元素的浮动属性float浮动元素贴靠现象✹如果父元素的宽度不能显示所有浮动元素,那么会从最后一个元开始往前贴靠。5.1

元素的浮动属性float浮动元素贴靠现象✹如果贴靠了前面所有浮动元素之后都不能显示,最终会贴靠到父元素的左边或者右边。5.1

元素的浮动属性float浮动元素字围现象✹浮动元素不会挡住没有浮动元素中的文字,没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象。应用场景：图文混排5.2

元素的清除浮动属性clear由于浮动的元素不再占据原始文档流的空间位置，设置了浮动的元素将会影响与它相邻的那些没有设置浮动的元素（会使它们的位置发生变化，产生元素覆盖的现象），那么如何解决浮动带来的影响呢？清除浮动清除浮动方式一给前面的父盒子添加高度（在标准流中内容的高度可以撑起盒子的高度，在浮动流中浮动元素内容的高不可以撑起盒子的高）注意点：在企业开发中能不写高度就不写高度,所以这种方式不常用清除浮动方式二利用clear属性清除前面浮动元素对该元素的影响。注意点：当我们给某个元素添加clear属性之后,这个元素的margin属性就会失效5.2

元素的清除浮动属性clear清除浮动清除浮动方式三隔墙法：外墙法/内墙法外墙法:1.在两个盒子之间添加一个额外的块级元素2.给这个额外添加的盒子添加clear属性注意点:外墙法可以让第二个盒子使用margin-top属性外墙法不可以让第一个盒子使用margin-bottom属性内墙法:1.在第一个盒子中所有子元素最后添加一个额外的块级元素2.给这个额外添加的块级元素添加clear属性注意点:内墙法可以让第二个盒子使用margin-top属性内墙法可以让第一个盒子使用margin-bottom属性外墙法和内墙法区别?外墙法不能撑起第一个盒子额高度,而内墙法可以撑起第一个盒子的高度5.2

元素的清除浮动属性clear清除浮动清除浮动方式四after伪对象清除浮动方式五overflow:hidden5.2

元素的清除浮动属性clearclear属性清除浮动语法格式选择器{clear:属性值;}属性值描述left不允许左侧有浮动元素（清除左侧浮动的影响）right不允许右侧有浮动元素（清除右侧浮动的影响）both同时清除左右两侧浮动的影响常用属性值5.3

元素的位置定位属性position与浮动相比，位置定位的布局方式更加准确、易控制，位置定位position是CSS的一个属性，常用的属性值有4个，分别是static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。定位属性positionstatic（静态定位）静态定位是各元素在HTML文档流中默认的位置，也就是说即使元素没有设置position:static;，元素在文档流中也会有默认位置。语法格式选择器{position:属性值；}5.3

元素的位置定位属性position定位属性positionrelative（相对定位）设置相对定位的元素以其原始位置为基准进行定位（将元素相对于它在标准文档流中的位置进行定位），通过CSS的4个边偏移属性top（上侧偏移量）、bottom（下侧偏移量）、left（左侧偏移量）、right（右侧偏移量）能够改变该元素的位置，但该元素仍然保留其在原始文档流的位置。定位前定位后在文档流中的位置仍然保留着5.3

元素的位置定位属性position定位属性positionabsolute（绝对定位）设置绝对定位的元素将以离它最近的父元素为基准进行定位，脱离标准文档流，但前提是其父元素已经设置了相对、绝对或固定定位，如果所有的父元素都没有设置定位，则以根元素body为基准进行定位，通过CSS的4个边偏移属性top、bottom、left、right能够改变元素的位置。定位前定位后在文档流中的位置没有被保留5.3

元素的位置定位属性position定位属性positionfixed（固定定位）设置固定定位的元素将以body根元素为基准进行定位，脱离标准文档流，无论浏览器窗口大小怎样变化，该元素始终显示在浏览器窗口的固定位置，通过CSS的4个边偏移属性top、bottom、left、right能够改变元素的位置。5.3

元素的位置定位属性position定位属性positionz-index（堆叠顺序属性）网页中如果有多个元素设置了定位，那么这些定位元素将会出现重叠的效果，就需要通过设置这些定位元素的z-index属性来指定哪个定位元素在上，哪个定位元素在下，z-index属性的属性值可以设置为负整数、0和正整数（默认值为0），取值越大，定位元素就越居上。实践应用：我们通常利用绝对定位制作二级或三级导航栏、制作banner版块上的漂浮文字或图片部分，利用固定定位制作网页的漂浮广告。5.4

元素的类型转换HTML元素分为两种：块元素（block）和行内元素（inline）。元素的类型转换①总是独占一行；②能够设置其宽度、高度、padding、margin和border属性；③常见的块元素有div、p、h1～h6、ul、li、form

等。块元素行内元素①不能独占一行，要与其他元素在同一行显示；②大多数行内元素的宽度、高度、上/下margin不能设置，元素的高度由自身的字体大小和图像尺寸；③常见的行内元素有span、a、input、strong、em、img

等。5.4

元素的类型转换如果块元素需要具有行内元素的特性，或者行内