一. 关于display:inline-block
inline-block的特性:
1、使块在一行显示;
2、行内属性标签支持宽和高;
3、没有宽度的时候,宽度由内容撑开;
※※ 使用它会出现以下问题 ※※
1、代码换行会被解析(br);
2、ie6、ie7 不支持块属性标签的inline-block;
有什么办法可以解决以上问题???答案是使用浮动。
二. 浮动的原理
元素加了浮动,会脱离文档流 ,按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止。
小贴士:文档流是文档中可显示对象在排列时所占用的位置。
设置浮动后,元素具有以下特性:
1、使块元素在一行显示;
2、使内嵌元素支持宽高;
3、不设置宽度的时候宽度由内容撑开;
4、脱离文档流;
float : left / right / none
三. 清浮动
为什么要清浮动?
因为浮动会对父元素和后面的元素有影响,当前面的元素设置为浮动后,它就脱离了文档流,后面的元素就会往上顶。
清浮动就是去除前面元素浮动对后面元素以及父元素的影响。
当父元素没有指定高度而它的子元素有浮动,这时这个父元素的高度不会自动增加(自适应)。
clear : left / right / both / none
清浮动的方法:
1、给父级也加浮动
问题:页面中所有父级都要加浮动。
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
清浮动:
1.给父级也加浮动
*/
</style>
<div class="box">
<div class="div"></div>
</div>
2、给父级加display:inline-block
问题:margin左右居中失效
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
清浮动:
2.给父级加display:inline-block
*/
</style>
<div class="box">
<div class="div"></div>
</div>
3、在浮动元素下加<div class="clear"></div>
问题:IE6 最小高度19px;(解决后IE6下还有2px偏差)
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
.clear{ height:0px;font-size:0;clear:both;}
/*
清浮动:
3.在浮动元素下加<div class="clear"></div>
.clear{ height:0px;font-size:0;clear:both;}
*/
</style>
<div class="box">
<div class="div"></div>
<div class="clear"></div>
</div>
4、在浮动元素下加<br clear="all"/> == clear:both
问题:不符合工作中结构、样式、行为三者分离的要求。
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
清浮动:
4.在浮动元素下加<br clear="all"/>
*/
</style>
<div class="box">
<div class="div"></div>
<br clear="all"/>
</div>
5、给浮动元素的父级加{zoom:1;}
:after{content:""; display:block;clear:both;}
<style>
.box{margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
.clear{zoom:1;} // 在ie67下触发haslayout
.clear:after{content:""; display:block;clear:both;} // 元素末尾追加内容
/*
清浮动:
5. 给浮动元素的父级加{zoom:1;}
:after{content:""; display:block;clear:both;}
*/
</style>
<div class="box clear">
<div class="div"></div>
</div>
**在IE6,7下浮动元素的父级有宽度就不用清浮动**
6、父级加绝对定位
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box1{border:30px solid red; position:absolute;}
#box2{ width:300px; height:300px; background:blue; float:left;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
7、父级加固定定位
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box1{border:30px solid red; position:fixed;}
#box2{ width:300px; height:300px; background:blue; float:left;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
分享到:
相关推荐
教程名称:妙味课堂Javascript之XHTML CSS2整站视频教程【12讲】 课程目录: 【】妙味课堂-XHTML CSS2整站视频教程-1 【】妙味课堂-XHTML CSS2整站视频教程-10 【】...
妙味课堂——前端HTML+CSS修炼之道--附赠章节源代码 妙味课堂——前端HTML+CSS修炼之道--附赠章节源代码
妙味课堂JS视频课后作业-完整详细版,是我自己学习过程中整理的文件,还有leo老师的解法~希望能给学前端的伙伴们提供方便。
提供的是妙味课堂的JavaScript视频教程全集下载,百度网盘链接 《初级》 http://pan.baidu.com/s/1hqyEjJ2 《中级》 http://pan.baidu.com/s/1pJ3P8uf 《高级》 http://pan.baidu.com/s/1mgu2msK
880集视频 120G 太给力了 web前端妙味教程课堂开发全套 百度网盘:txt 链接下载
妙味课堂- 播放器,是专门用来播放妙味课程的播放器!
03妙味课堂——javascript彩虹圈效果03妙味课堂——javascript彩虹圈效果
防妙味课堂运动框架,javascript,运动框架,花了2天学习妙味课堂运动框架,一天时间敲代码,调试,辛苦的结晶。一分,对得起我的劳动吧。
教程名称:妙味课堂Javascript特效视频教程 课程目录: 【】01-视频教程版块——360度全景图片 【】02-视频教程版块——QQ幻灯片 【】03-视频教程版块——变量详解(2课...
妙味课堂-视频问题解答-jQuery,源码,方便学习
JavaScript妙味课堂:动画弹性的产品展示效果,其实更像是一个菜单,可以分类的菜单,点击下边的文字分类,上边的图片会慢慢消失然后对应的分类就回来了,带点Flashr动画效果。
1 妙味课堂原创JavaScript视频教程 JS基础教程5课资料
教程名称:妙味课堂Javascript高级进阶视频课程【16讲】 课程目录: 【】8-dom高级1 【】8-dom高级2 【】8-php后台1 【】8-php后台2 【】8-事件高级应用1 ...
01妙味课堂——360度全景展示效果01妙味课堂——360度全景展示效果
2 妙味课堂原创JavaScript视频教程 DOM 2课 BOM课程资料
JavaScript妙味课堂首页的Banner图片切换代码,有着极平滑的图片过渡效果,两幅图片采用淡入、淡出交替,控制按钮可控制播放进度,当然,它自己也会切换的,做的挺不错,不亏是JavaScript脚本的培训课堂。
妙味热身01 课后练习 请为下面的div设置样式,通过点击设置来选择颜色、宽度、高度。
妙味课堂是一家网页教学工作室,他们擅长JS前端技术,本文就是妙味课堂出品的JS模拟Flash动感的图文导航菜单,效果流畅,图文结合的Flash菜单,超不错,分享给大家。
妙味视频+JavaScript+jquery+html5+css3视频教程(88GB)+项目实战
此资源包含妙味课堂老师讲的js课程,非常有用,如果有想提高自己原生js和逻辑思维的小伙伴可以下载这些代码来观看,自己动手编程,进步会很大呢~