Web前端开发 课件 6.2 浮动布局_第1页
Web前端开发 课件 6.2 浮动布局_第2页
Web前端开发 课件 6.2 浮动布局_第3页
Web前端开发 课件 6.2 浮动布局_第4页
Web前端开发 课件 6.2 浮动布局_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

静态网页设计第六章核心应用——排版布局浮动布局1HTML元素的三种分类什么是浮动布局？2浮动布局适用于哪些场景？3如何设置浮动布局？4如何处理浮动布局带来的问题？5HTML元素的3种分类01HTML元素的3种分类表现形式上分：三种元素之间可以通过display属性或浮动、定位等进行相互转换典型特征：独占一行,可直接设置宽高、上下边距常见元素：

div、p、h1~h6、ol、ul、dl、table、form、...块级元素典型特征：一行能显示多个,

不能直接设置宽高、上下边距等常见元素a、span、br、i、em、...行内元素典型特征：兼具块级、行内两种元素特性，一行能显示多个，可以设置宽高和上下边距常见元素：img、input、行内块元素什么是浮动布局?02什么是浮动布局?float给元素添加float属性让元素像漂浮起来一样脱离默认文档流能使元素向左或向右浮动直到碰到父元素边框或另一个浮动元素Clear给后面元素添加clear属性清除前面元素的浮动对后面元素的影响此处做一个动画：让元素像漂浮起来一样脱离默认文档流，能使元素向左或向右浮动，直到碰到父元素边框或另一个浮动元素。浮动布局适用于哪些场景？03浮动布局适用于哪些场景？文字环绕多列布局含有块元素的横向布局等相比使用display:inline-block，浮动布局可以轻松实现左右两个方向的对齐排列如何设置浮动?04如何设置浮动1左浮动1左浮动1右浮动语法要设置浮动布局，需要给元素添加float属性：元素选择器{float:none|left|right; /*不浮动|左浮动|右浮动*/}123处理浮动布局带来的父元素高度塌？05处理浮动布局带来的父元素高度塌左浮动右浮动1.给“父元素添加合适的高度”2.使用“清除浮动（clear属性）”3.使用“触发浮动元素父容器BFC”消除塌陷左浮动右浮动浮动元素会脱离文档流，不再占据文档流中的位置，导致父元素则会塌陷。原因分析理想效果实际效果——父元素高度塌陷后期剪辑：元素分类：块级元素、行内元素、行内块元素三类元素的区别和典型特性浮动布局的概念浮动布局的适用场景如何设置浮动布局如何处理浮动布局带来的缺陷总结与思考PPT美化：

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论