CSS彻底研究(3) - 浮动,定位
2014-07-07 17:08
218 查看
Github pages 博文
CSS彻底研究(3)-浮动,定位
一 . 浮动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
显示效果为
1,2的float分别为left right时,有
可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合
当1,2,3全都float left时
文字围绕着float过的div
1,2左浮动,3右浮动,当窗口宽度减小时,3会被挤下来
当3左浮动,2右浮动的时候,显示为
当浏览器窗口宽度减小时,猜猜谁会被挤下来,son2么?
答案还是son3,规则为 : 写在html文件中后面的会被挤下来,在html文件中,son3在son2后面,因此总是son3先挤下来。
增加son1高度,son3挤下来时会卡在那里
删除盒子中的文字,3个子div全部左浮动
显示为
父div中的三个子div全部脱离标准流了,父div就缩成一条线了,可以用clear来修正
加一个margin-padding-border全为0,clear为both的空div,来撑大父div
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; }
显示效果
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等新添加的,参考http://www.w3school.com.cn/cssref/pr_class_display.asp
相关文章推荐
- CSS 设计彻底研究(四)盒子的浮动与定位
- CSS float浮动的深入研究、详解及拓展(一)
- css之浮动与定位
- CSS布局浮动(float)和定位(position)属性的区别和使用
- 说说标准——CSS核心可视化格式模型(visual formatting model)之九:浮动(Float)定位细则二
- CSS核心内容-标准流、盒子模型、浮动、定位
- css 样式设计(一)( 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 )
- CSS:标准文档流、浮动、绝对定位—(解决有时候父元素不能自动扩展)
- CSS 选择器 样式 浮动 盒子模型 块元素 内联元素 内联块元素 定位 权重
- 辛星跟您彻底解决CSS中的浮动(下)
- CSS三种定位机制:普通流、浮动和绝对定位
- CSS中浮动和定位的总结
- css(三)---定位与浮动的学习
- (转)css 相对定位 绝对定位 浮动 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”
- 精通css(3) 盒模型,定位,浮动
- 初学牛腩CSS核心内容标准流,盒子模型,浮动,定位
- CSS float浮动的深入研究、详解及拓展(一)
- CSS布局浮动(float)和定位(position)属性的区别和使用
- CSS—定位与浮动
- CSS float浮动的深入研究、详解及拓展 一 一 一 一 一 一 一 一