DIV+CSS 学习心得<9>:Position和Float

[ 作者:笑傲江湖 发布于:2011年-2月-11日 8:07 星期五  分类:百 宝 箱 ]

  Position的意思比较多,我理解成定位,就是用于给块来安排位置用的,一个块怎么放,放哪里,什么方式,当块内的内容超出了块定义的宽和高后怎么个表现方式(是覆盖其他块,还是被其他块覆盖)等,都是可以定义的。定位用的属性有四个:top, bottom, left, right,就是上下左右了,但必须是先定义了定位的方式,这四个属性才会起作用,否则无效。属性具体的效果也根据定位方式的不同而有差别。
  Position的方式:Static/Fixed/Relative/Absolute,按照字面意思翻译就是静态/固定/相对/绝对,我是这么翻译的。下面就一个一个唠叨一下。
  Static:HTML的元素,缺省情况下都是这个定位方式, A static positioned element is always positioned according to the normal flow of the page.这句英文我确实不知道怎么翻译才好,尤其是最后的页面的标准流这个概念,我理解是页面的逐行方式,页面的自然位置安排。由此可知,默认情况下,定位的方式是static,所以上面说的的四个属性top, bottom, left, right是没有的,即便是你定义了值也是和没定义一样。暂且咱就把这种状态称作一个块的原始状态。
  Fixed:这个固定,是相对于浏览器窗口而言的,如果一个块被position:fixed,那这个块的位置的宽高的起点是浏览器显示网页内容区域的左上角,具体显示的位置是你定义的top, bottom, left, right的值。同时,这个块是不会随着浏览器的滚动条滚动发生位置变化的,说白了,这块就已经被钉死在那里了。所以这个fixed方式一般是用作页面上浮动面板,导航等等需要固定位置显示的内容用的。
  Relative:相对定位,这里的相对,是说的相对与这个元素本身在Static方式时的位置,就是上面说的原始状态,下看下图:

  图中有9个块,假如都是按照static状态排列的(实际可能不可能,只是为了说明问题),用中间的编号为5的块来举例,现在把5这个块的position:relative;top:100px;left:100px之后,块的位置会发生变化,变化见上图,其中的top和left的起点是该块原始位置的左上角标注X的地方,位置变化后,块的左上角同样我标注了一个X,这样就好理解位置是如何发生变化的了。既然位置发生变化了,是要和其他块发生位置重叠的,图中的块5和块6、8、9产生了位置重叠,这样就有个块内容谁覆盖谁的问题,也就是哪个块显示在上,哪个在下。假如9个块是按照编号依次放置,那后放置的会覆盖前面块的内容,这个我在图中没有表示出来,按照前面说的都是按照static状态排列的话,块5位置变化后,和块6、8、9重叠的部分,应该是被块6、8、9的内容覆盖的,这个实验留给你自己去体会吧。当然,你要是不想让块6、8、9的内容覆盖块5的内容,可以给块5指定一个大于块6、8、9的z-index的值,这个z-index的值用于控制各个块在垂直于屏幕的方向上的显示顺序,类似于Photoshop里层的概念,就是哪个块在上面,哪个块在下面。如果都没有指定,那就按照块的自然顺序,越靠后的块会覆盖前面的块。
  Absolute:绝对定位,这里说的绝对是说对于一个块的父级元素、父级块而言的,如果没有父级元素、父级块,那默认的父级块是<html>,同时父级元素、父级块必须是除static之外的position定位方式,也就是父级块、父级元素需要有position为Fixed/Relative/Absolute的定位方式才有效。如果一个合适的父级都没找到,那父级块就又成了<html>了。用下面我写的代码测试一下吧,先直接点击运行代码按钮查看效果,修改了值以后再次点击运行代码按钮看看修改后的效果:




  最后说一下Float,说白了就是一个HTML元素的左对齐和右对齐的问题,跟在这个元素之后的内容将会环绕包围着它,之前的元素不受影响,Float一般应用于图片,当然,也可以用在其他元素,或者用于块。所以,float是水平方向的移动,上下是不行的。至于一个块或者元素能向左和向右float的程度,是依据它的父级元素、块给留下的空间有多大。如果有多个元素或块是float的,且这多个元素和块都在同一个父级元素或块中,它们会一个挨一个的排成一排,顺序吗当然就是元素或块出现的先后顺序。
  上面也说了,一个float的元素或块之后的元素或块是环绕它周围的,如果之后的元素或块你需要从新开始一行,那就需要在从新开始一行的元素或块的css定义clear一下,clear:both;就这句了,both表示左右都不环绕了,也可以单独clear left或者clear right。具体的例子我就不说了,自己动手实验一下吧。
  到这里,俺个人的DIV+CSS之旅心得算是讲的差不多了,以后就是零零星星一些具体细节上使用的东西了,活到老学到老吗,整个这九回的心得,也花了我不少时间和精力,当然,我知道这对我自己是有好处的,等过段日子,再回过头来看看那自己写的东西,估计还会有新发现,到时候会补充进来。如果哪里说的不对,或者有问题,还请高手高抬贵手留言指出,俺万分感谢。如果也有初学的,大家可以多交流,至于怎么找到我,博客最下面关于我&博客的页面里有联系方式,欢迎骚扰^_^
[Edit on 2011-2-12 0:40:55 By 笑傲江湖]

标签: CSS DIV

评论0 引用0 浏览3547

说点什么:

正文内容:

 




图片博文
适马 18-35mm F1.8 DC HSM