注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

CSS基础笔记(关于定位)  

2013-05-29 19:48:12|  分类: Css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
CSS三种定位:
普通流,浮动流和绝对定位
默认情况下,所有块级元素都会从上到下,依次排列,垂直距离由上篇提到的框模型垂直属性决定.

既然说到块级元素,就说说它和行内元素的一些区别:
块级元素(上面已经解释过)框的垂直距离由框的垂直属性计算出来
例如 div p h1

行内元素 (可以通过display属性改变生成框的类型inline, block) 行内元素的大小取决于它的内容大小
例如 span strong
行内框,可以使用水平的padding,border,margin调整它们的水平距离
但是,垂直却不影响行内框的高度,这时候line-height可以设置这个框的高度


浮动流,相信大家一定对这个很熟悉:
w3c上的详细讲解: http://www.w3school.com.cn/css/css_positioning_floating.asp

CSS基础笔记(关于定位) - 星期五 - 星期五
 
例子1 向左移动 http://get-set.cn/wordpress/demo/css_test/float2.html
例子2 向左移动 空间不够 http://get-set.cn/wordpress/demo/css_test/float1.html
例子3 不同高度的框 http://get-set.cn/wordpress/demo/css_test/float3.html

使用clear属性对float进行清理:
http://www.w3school.com.cn/css/css_positioning_floating.asp

定位:
分为相对,绝对和固定定位,

这些定位取决与一个CSS属性: position

相对定位
positionrelative;
在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。移动元素会覆盖其他框

CSS基础笔记(关于定位) - 星期五 - 星期五

例子1 块级元素相对定位 http://get-set.cn/wordpress/demo/css_test/relative1.html
例子2 行级元素相对定位
http://get-set.cn/wordpress/demo/css_test/relative2.html
例子3 浮动流中的相对定位  http://get-set.cn/wordpress/demo/css_test/relative3.html

绝对定位 positionabsolute;

绝对定位使元素的位置与文档流无关,因此不占据空间。其他元素就像不存在一样。
绝对定位的元素位置,相对于最近已定位的祖先元素。如果元素没有已定位的祖先元素,那么相对于最初的包含块,可能是html元素
CSS基础笔记(关于定位) - 星期五 - 星期五
 
CSS基础笔记(关于定位) - 星期五 - 星期五

例子1 块级元素行绝对定位 http://get-set.cn/wordpress/demo/css_test/absolute1.html
例子2 行级元素行绝对定位 http://get-set.cn/wordpress/demo/css_test/absolute2.html
例子3 浮动流没有已定位的父元素 http://get-set.cn/wordpress/demo/css_test/absolute3.html
例子4 父元素已定位的绝对定位 http://get-set.cn/wordpress/demo/css_test/absolute4.html

固定定位: positionfixed;
这个一般用于一个固定按钮,比如返回顶部.

关于定位,这是一个非常重要的基础,只有熟练的掌握它, 我们就可以跟近一步学习CSS的一些页面高级布局.

参考资料:

http://www.w3school.com.cn/css/css_positioning.asp

  评论这张
 
阅读(147)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017