版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
任务11元素的浮动第五单元盒子模型学习目标清除浮动元素的类型及转换overflow属性元素的浮动掌握元素浮动在网页布局中的作用了解:学习目标任务目标实战演练——制作网站导航条任务目标强化训练——制作浪漫花语百科网知识准备1.元素的类型：行内（inline）元素行内（inline）元素：不占有独立的一行完全不支持盒子模型一般不可以设置行内元素的宽度、高度、对齐等属性宽度和高度由其内容来决定，内容多宽占多宽如：<span>、<a>、<strong>、<em>、<i>、<u>、<s>、<del>、<ins>等。知识准备1.元素的类型：块（block）元素块（block）元素：占有一行或多行完全支持盒子模型可以设置块元素的宽度、高度、对齐等属性如：<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>、<header>、<section>、<article>、<footer>等。知识准备1.元素的类型：行内块（inline-block）元素行内块（inline-block）元素：不占有独立的一行支持部分盒子模型可以设置块元素的宽度、高度、对齐等属性如：<img>、<input>等。知识准备2.元素类型的转换选择器{display:属性值;}属性有四个值：inline：将元素转换成行内元素。block：将元素转换成块元素。inline-block：将元素转换成行内块元素。none：将元素隐藏，不占据页面空间。知识准备示例：元素类型的转换<styletype="text/css">a{border:1pxsolid#00f;display:block;
/*行内元素转换成块元素*/width:500px;height:50px;}p{border:1pxsolid#00f;
display:inline;/*块元素转换成行内元素*/width:500px;height:50px;}</style><body><ahref="#">行内元素转换成块元素</a><ahref="#">行内元素转换成块元素</a><ahref="#">行内元素转换成块元素</a><p>块元素转换成行内元素</p><p>块元素转换成行内元素</p><p>块元素转换成行内元素</p></body>知识准备3.overflow属性
在盒子模型中，当盒子内的内容超出盒子的大小时，就会产生溢出现象。我们可以对超出的内容使用overflow属性进行设置。语法规则：选择器{overflow:属性值;}属性有四个值：visible：默认值，内容显示在盒子框外hidden：将超出的内容隐藏scroll：始终出现滚动条auto：根据实际情况作出调整，如果没有超出就正常显示，否则将会出现滚动条知识准备示例：overflow属性overflow:visibleoverflow:hiddenoverflow:scrolloverflow:auto知识准备4.元素的浮动元素浮动：改变普通文档流的排列方式，使得块元素在同一行中排列，让网页布局更加方便。语法规则：选择器{float:属性值;}属性有三个值：none：默认值，表示元素不浮动left：左浮动right：右浮动左浮动元素运动轨迹右浮动元素运动轨迹知识准备浮动原则：有浮动属性的元素肯定会移动，但未必会改变原来的位置。有浮动属性的元素是脱离原有文档流的。如果上一行没有浮动元素，那么下一行的浮动元素是移动不上去的。非浮动元素会忽略掉它前面的浮动元素，取代其前面浮动元素的位置。4.元素的浮动知识准备示例：元素的浮动<styletype="text/css">*{margin:0px;padding:0px;}div{width:150px;height:50px;}#box1{background-color:red;
float:left;}#box2{background-color:blue;
float:left;}#box3{background-color:green;
float:left;}</style><body><divid="box1">box1</div><divid="box2">box2</div><divid="box3">box3</div></body>float:right;}float:right;}float:right;}知识准备示例：元素的浮动<styletype="text/css">*{margin:0px;padding:0px;}div{width:150px;height:50px;}#box1{background-color:red;
float:left;}#box2{background-color:blue;
width:250px;height:150px;}#box3{background-color:green;}</style><body><divid="box1">box1</div><divid="box2">box2</div><divid="box3">box3</div></body>float:left;}float:left;}知识准备5.清除浮动清除浮动：避免浮动元素对其他元素产生的影响语法规则：选择器{clear:属性值;}属性有三个值：left：清除左浮动的影响right：清除右浮动的影响both：同时清除左右两侧浮动的影响知识准备示例：清除浮动<styletype="text/css">.father{background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{line-height:40px;background-color:#9F6;margin:15px;height:40px;padding:0px10px;border:1pxsolid#999;
float:left;}p{background-color:#CCF;border:1pxdashed#C0F;margin:15px;padding-top:0px10px;
}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div>
<p>为什么要清除浮动？如果网页元素设置了浮动属性，那么该元素就会脱离文档流，不再占据原来的位置，与其相邻的其他固定元素也会受其浮动属性的影响，从而产生位置上的变化。为了避免浮动元素对其他元素产生的影响，就需要清除浮动。如何清除浮动？可以设置clear属性，即clear:left清除左浮动的影响，clear:right清除右浮动的影响，clear:both同时清除左、右两侧浮动的影响。</p></div></body>clear:left;/*清除左浮动*/知识准备示例：清除特殊浮动
<styletype="text/css">.father{background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{line-height:40px;background-color:#9F6;margin:15px;height:40px;padding:0px10px;border:1pxsolid#999;
float:left;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>不能清除浮动？clear:left;知识准备示例：使用空标记清除浮动<styletype="text/css">.father{background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{line-height:40px;background-color:#9F6;margin:15px;height:40px;padding:0px10px;border:1pxsolid#999;
float:left;}
.box4{clear:left;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div>
<divclass="box4"></div></div></body>知识准备示例：使用overflow属性清除浮动
<styletype="text/css">.father{background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{line-height:40px;background-color:#9F6;margin:15px;height:40px;padding:0px10px;border:1pxsolid#999;
float:left;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>overflow:hidden;实战演练
案例描述：设计并制作网站导航条，网页效果如下图1所示。当鼠标移动到每个菜单选项上时，选项的背景颜色将会发生变化，效果如图2所示。制作网站导航条图1图2强化训练案例描述：设计并制作浪漫花语百科网，网页效果和布局图如下。制作浪漫花语百科网任务小结01元素的类型及转换02overflow属性03元素的浮动04清除浮动课后实训
设计并制作学院网站，效果如图1所示，当光标移动到网站导航上时，效果如图2所示。网页布局可参考图3。图1图2图3任务12元素的定位第五单元盒子模型学习目标固定定位（fixed）静态定位（static）相对定位（relative）绝对定位（absolute）掌握不同定位模式的应用场合了解:学习目标任务目标实战演练——制作旅游景点推荐网banner强化训练——制作个人博客首页知识准备1.元素的定位元素的定位：可以精确定义一个元素的准确位置（1）定位模式：position属性static：静态定位relative：相对定位absolute：绝对定位fixed：固定定位（2）边偏移：left：左侧偏移量right：右侧偏移量top：顶端偏移量bottom：底部偏移量知识准备2.静态定位（static）静态定位（static）：网页元素默认的定位方式，元素按照标准流进行布局。不能通过设置边偏移属性left、right、top、bottom值来改变元素的位置。知识准备3.相对定位（relative）相对定位（relative）：网页元素相对于其在原文档流的位置进行定位，当元素设置为相对定位“position:relative;”，该元素就会相对于其自身的默认位置进行偏移，但是它在文档流中的位置仍然保留。知识准备示例：元素的相对定位<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:relative;/*相对定位*/left:150px;/*距离原位置左边线150px*/top:100px;/*距离原位置顶部边线100px*/}</style>知识准备4.绝对定位（absolute）绝对定位（absolute）：将元素相对于距离其最近的、已经定位（相对、绝对或固定定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当元素设置为绝对定位“position:absolute;”，该元素就会相对于其父元素或body根元素进行偏移，脱离文档流，它在文档流中的位置将被其他元素占据。知识准备示例：元素的绝对定位<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:absolute;/*绝对定位*/left:150px;/*距离父元素左边线150px*/top:100px;/*距离父元素顶部边线100px*/}</style>知识准备示例：“子绝父相”原则<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{
position:relative;margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年发展对象培训课考试试题及答案解析
- 换电模式练习题及参考答案
- 紫胶漂白工操作规范评优考核试卷含答案
- 汽车发动机结构与基本工作原理2试卷含答案
- 创业对策类面试题与参考答案
- 非织造布制造工复试强化考核试卷含答案
- 2026年新能源行业技术创新应用分析报告
- 茶叶加工工岗前操作规程考核试卷含答案
- 康复辅助技术咨询师安全生产能力竞赛考核试卷含答案
- 汽车维修工岗位协调考核试卷含答案
- 十五五原材料工业发展规划
- 诊所医保考试题及答案
- CJ/T 511-2017铸铁检查井盖
- 2024广东佛山市南海农商银行中层副职管理人员社会招聘笔试历年典型考题及考点剖析附带答案详解
- DB44-T 1661-2021 河道管理范围内建设项目技术规程
- 辽宁省建设工程计价依据-园林绿化工程定额2024版
- 护理人员精神科进修汇报
- 10千伏环网柜（箱）标准化设计方案 （2023 版）
- 2024版建筑工程实名制管理手册附表格示范文本
- 航空器电气系统安全-深度研究
- 脓毒血症护理查房要点
评论
0/150
提交评论