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

;;;6.1.1浮动的属性;;以Box01为设置对象,对其应用左浮动样式,具体CSS代码如下。

.Box01{float:left;};Box01、Box02、Box03三个盒子整齐地排列在同一行,可见通过应用float:left;样式可以使Box01和box2同时脱离标准文档流的控制向左漂浮。

接下来,在上述案例的基础上,继续为Box03设置左浮动,具体CSS代码如下。

.Box01,.Box02,.Box03{float:left;};6.1.2浮动的清除;需要注意的是,clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时,经常遇到一些特殊的浮动影响。例如,对子元素设置浮动时,如果不对其父元素定义高度，则子元素浮动会对父元素产生影响,接下来看看子元素浮动对父元素的影响。实现效果如下图所示。;方法一:使用空标记清除浮动;2;方法三:使用after伪对象清除浮动;6.1.3overflow属性;overflow:hidden;/*溢出内容被修剪,且不可见*/;;6.2.1定位布局的属性;2.边偏移;定位方式又分成静态定位（static）、相对定位（relative）和绝对定位（absolute）。

静态定位static

静态定位是元素的默认定位方式,当position属性的取值为static时,可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

任何元素在默认状态下都会以静态定位来确定自己的位置,所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性(top、bottom、lef或right)来改变元素的位置。

相对定位relative

相对定位是将元素相对于它在标准文档流中的位置进行定位,当position属性的取值为relative时,可以将元素定位于相对位置。对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留。;;;四、固定定位fixed;6.2.2层叠等级属性;;6.3.1类型分类;6.3.2span标记;6.3.3元素之间转换;;;;;此部分内容作为文字排版占位显示（建议使用主题字体）;;;标题文本预设;;版权声明

感谢您支持原创设计事业，支持设计版权产品！

感谢您下载千图网原创PPT模板。为了您和千图网以及原创作者的利益，请勿复制、传播、销售，否则将承担法律责任！

千图网将对作品进行维权，按照传播下载次数的十倍进行索取赔偿金！

1、千图网网站出售的PPT模版是免版税类（RF：Royalty-free）正版受《中华人民共和国著作法》和《世界版权公约》的保护，作品的所有权、版权和著作权归千图网所有，您下载的是PPT模版素材使用权。

2、不得将千图网的PPT模版、PPT素材，本身用于再出售，或者出租、出借、转让、分销、发布或者作为礼物供他人使用，不得转授权、出卖、转让本协议或本协议中的权利。

3、禁止把作品纳入商标或服务标记。

4、禁止用户用下载格式在网上传播作品。或者作品可以让第三方单独付费或共享免费下载、或通过转移电话服务系统传播。