关于浮动及定位
2016-04-26 23:24
302 查看
一 . 浮动float
I . 定义及规则
float默认为none,对应标准流的情况。当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定。
II . 演示规则
准备代码<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> body { margin: 0; padding: 0; } #father { background-color: cyan; /*父级div 没有定位 造成子div的margin-top传递给父级*/ position: absolute; } #father * { margin: 10px; padding: 10px; border: 1px dashed red; } #son1 { } #son2 { } #son3 { } </style> </head> <body> <div id="father"> <div id="son1">#son1</div> <div id="son2">#son2</div> <div id="son3">#son3-son3son3son3</div> <p> 这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字 </p> </div> </body> </html>
中间给#father加上
position:absolute,是为了消除
未定位父div的margin-top传递问题,见http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html
显示效果为
![](https://images0.cnblogs.com/blog/524870/201407/071540241457434.png)
1,2的float分别为left right时,有
![](https://images0.cnblogs.com/blog/524870/201407/071544492541561.png)
可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合
当1,2,3全都float left时
![](https://images0.cnblogs.com/blog/524870/201407/071549230207963.png)
文字围绕着float过的div
1,2左浮动,3右浮动,当窗口宽度减小时,3会被挤下来
![](https://images0.cnblogs.com/blog/524870/201407/071552451456014.png)
当3左浮动,2右浮动的时候,显示为
![](https://images0.cnblogs.com/blog/524870/201407/071555003173543.png)
当浏览器窗口宽度减小时,猜猜谁会被挤下来,son2么?
![](https://images0.cnblogs.com/blog/524870/201407/071556555203872.png)
答案还是son3,规则为 : 写在html文件中后面的会被挤下来,在html文件中,son3在son2后面,因此总是son3先挤下来。
增加son1高度,son3挤下来时会卡在那里
![](https://images0.cnblogs.com/blog/524870/201407/071600058799628.png)
删除盒子中的文字,3个子div全部左浮动
显示为
![](https://images0.cnblogs.com/blog/524870/201407/071608127707975.png)
父div中的三个子div全部脱离标准流了,父div就缩成一条线了,可以用clear来修正
加一个margin-padding-border全为0,clear为both的空div,来撑大父div
![](https://images0.cnblogs.com/blog/524870/201407/071610537546924.png)
III . clear清除浮动
如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.二 . 定位position
position取值有static absolute relative fixed1. static
这个是默认的,即标准流排下来,就是static定位方式.2. fixed
在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的练习做个回到顶部玩玩
<div id="backToTop"> 回到顶部 </div>
#backToTop { width: 100px; height: 50px; background-color: red; color: white; cursor: pointer; border-radius: 25px 0 0 25px; padding-left: 20px; text-align: center; line-height: 50px; position: fixed; bottom: 80px; right: 0; }
显示效果
![](https://images0.cnblogs.com/blog/524870/201407/071652018488873.png)
3. relative相对定位
相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量4. absolute绝对定位
根据别的已定位元素进行定位,应用absolute规则的脱离标准流这个别的元素:
离它最近的已定位的祖先元素 或者 浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位.
已经定位 : 是指position已经设置,而且不是static...即position值不为static就是已经定位的元素,未设置position或设置为static认为它没有定位.
Trick
只设置
position : absolute,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.
三 . display
display取值有inline block none设置为none,即可将其隐藏,像inline-block等新添加的,参
相关文章推荐
- 经典排序之归并排序
- like关键字优化
- libevent -简单的异步IO介绍
- sublime使用基础
- 打开redis服务提示
- C++作业4
- SQL Server中常用的快捷键
- mysql连接字符串
- 2.使用iptables监控上传流量
- 【小玩意】time-passing-by clock
- 深入理解HTTP Session
- HDU1166 敌兵布阵
- iOS—ViewController的生命周期分析和使用
- c++第四次作业
- 今天很开心,因为我的网站上线啦!
- [C++]资源管理
- ***PHP Notice: Undefined index: ..问题的解决方法
- 20145214实验四 Android开发基础
- 团队作业四
- 素数筛法