《Web前端开发项目教程》网页的蓝图-复杂布局-浮动布局两栏式页面_第1页
《Web前端开发项目教程》网页的蓝图-复杂布局-浮动布局两栏式页面_第2页
《Web前端开发项目教程》网页的蓝图-复杂布局-浮动布局两栏式页面_第3页
《Web前端开发项目教程》网页的蓝图-复杂布局-浮动布局两栏式页面_第4页
《Web前端开发项目教程》网页的蓝图-复杂布局-浮动布局两栏式页面_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

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

文档简介

项目03网页的蓝图—复杂布局任务3-1浮动布局两栏式页面任务3-1浮动布局两栏式页面

知识点理解浮动布局掌握浮动属性float的用法掌握清除浮动属性clear的用法技能点能够熟练应用浮动属性完成图文混排效果能够清除页面排版中浮动对其它元素的影响一、认识浮动元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。三个盒子全部浮动二、元素的浮动属性float用法：

选择器{float:属性值;}常用的float属性值有三个：left：元素向左浮动right:元素向右浮动none:元素不浮动（默认值）2.1不设置浮动在默认标准流模式下，html文档中的元素就像“流水”按照排列次序依次在页面中出现，所有元素的float属性值未经设置都取其默认值none。<head><metacharset="utf-8"><title>float</title><styletype="text/css">

.box01,.box02,.box03{height:50px;padding:10px;margin:10px;}

.box01{ background:#f88; } .box02{ background:#8f8; }

.box03{ background:#88f; }

p{background:#CCCCCC; border:1pxdashed; }</style></head><body>

<divclass="box01">box01</div>

<divclass="box02">box02</div>

<divclass="box03">box03</div>

<p>新华社北京8月31日电中共中央政治局8月31日召开会议，审议《黄河流域生态保护和高质量发展规划纲要》和《关于十九届中央第五轮巡视情况的综合报告》。中共中央总书记习近平主持会议。</p></body>2.2设置浮动.box01{/*定义box01左浮动*/ float:left;}.box01,.box02{/*定义box01、box02左浮动*/ float:left;}.box01,.box02,.box03{/*定义box01、box02、box03左浮动*/ float:left;}三、清除浮动由于浮动元素不再占用原文档流的位置，所以它会对标准流中后面元素的排版产生影响。clear属性的常用值有三个，分别表示不同的含义，具体如下：left：清除左侧浮动的影响right：清除右侧浮动的影响both：同时清除左右两侧浮动的影响如果声明为left或right，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下，声明both则是在左右两侧均不允许浮动元素。三、清除浮动清除浮动p{clear:left;}/*清除左浮动*/四、盒子的高度塌陷及解决方法<head><metacharset="utf-8"><title>float</title><styletype="text/css">

.box{border:1pxsolid;background:#ccc;}

.box01,.box02,.box03{height:50px;padding:10px;margin:10px;float:left;}

.box01{background:#f88;}

.box02{background:#8f8;}

.box03{background:#88f;}</style></head><body><divclass="box">

<divclass="box01">box01</div>

<divclass="box02">box02</div>

<divclass="box03">box03</div></div></body>阅读下列代码，找出父级盒子成为一条直线的原因四、盒子的高度塌陷及解决方法高度塌陷的原因父元素中的所有子元素均设置浮动父元素没有定义高度解决方案使用空标记清除浮动使用after伪对象清除浮动使用overflow属性清除浮动4.1使用空标记清除浮动 <body> <divclass="box"> <divclass="box01">box01</div> <divclass="box02">box02</div> <divclass="box03">box03</div>

<divclass="clear"></div> </div> </body><styletype="text/css">

.box{

border:1pxsolid;

background:#ccc;

}

.box01,.box02,.box03{

height:50px;

padding:10px;

margin:10px;

}

.box01{background:#f88;}

.box02{background:#8f8;}

.box03{background:#88f;}

.box01,.box02,.box03{float:left;}

.clear{clear:both;}</style>4.2使用after伪对象清除浮动.box:after{ /*对父元素应用after伪对象样式*/ display:block;/*只有块级元素才能清除浮动*/ content:"";/*没有内容，但是必须设置*/ clear:both;}伪对象选择器是专门用来选择特殊区域的对象，这些特殊区域是无法通过标签选择器、ID选择器或者类选择器来进行精确控制的。after伪对象的用法如下：指定选择器:after{样式规则}与content属性一起使用，定义在对象后面的内容。after伪对象也可以清除浮动，该方法只适用于IE8及以上版本浏览器和其他非IE浏览器4.3使用overflow属性清除浮动.box{

border:1pxsolid;

background:#ccc;

overflow:hidden;

}overflow属性通常用于规定当盒子内的元素超出盒子自身的大小时，溢出的内容会如何处理。给一个元素设置overflow:hidden，该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被

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

温馨提示

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

最新文档

评论

0/150

提交评论