带来一篇CSS实例教程:定位(position)结构页面
大大缩减页面代码,提高页面浏览速度,缩减带宽成本;网页制造poluoluo文章简介:定位(position)结构页面说简单十分简单,只必要记着这节课最初一句话就能够了,说坚苦,那是相称的难了解,必要必定的耐烦,不外还好,KwooJan给人人总结的已很普通易懂了。
注:在做这节教程的时分,我又上彀查了相干材料,看了大批的文章,做了大批的测试,最初总结出上面这些笔墨,味同嚼蜡一整篇,不外必要人人一句话一句话的看,必定要细心喽!另有关于课程中的说的,最好一边看,一边练,不练相对看不懂!
定位(position)结构页面说简单十分简单,只必要记着这节课最初一句话就能够了,说坚苦,那是相称的难了解,必要必定的耐烦,不外还好,KwooJan给人人总结的已很普通易懂了。
假如上面的笔墨其实是没法了解透,那就记着这节课最初总结的一句话“假如用position来结构页面,父级元素的position属性必需为relative,而定位于父级外部某个地位的元素,最好用absolute,由于它不受父级元素的padding的属性影响,固然你也能够用position,不外到时分盘算的时分不要健忘padding的值。”
好,上课!
任何元素的默许position的属性值均是static,静态。这节课次要讲讲relative(绝对)和absolute(相对)。
【position:absolute】
意义是:他的意义是相对定位,他默许参照扫瞄器的左上角,共同TOP、RIGHT、BOTTOM、LEFT(上面简称TRBL)举行定位,有以上司性:
1)假如没有TRBL,以父级的左上角,在没有父级的时分,他是参照扫瞄器左上角,假如在没有父级元素的情形下,存在文本,则以它后面
的最初一个笔墨的右上角为原点举行定位可是不休开笔墨,掩盖于上方。
2)假如设定TRBL,而且父级没有设定position属性,那末以后的absolute则以扫瞄器左上角为原始点举行定位,地位将由TRBL决意。
3)假如设定TRBL,而且父级设定position属性(不管是absolute仍是relative),则以父级的左上角为原点举行定位,地位由TRBL决意。即便父级有Padding属性,对其也不起感化,说复杂点就是:它只保持一点,就以父级左上角为原点举行定位,父级的padding对其基本没有影响。
以上三点能够总结出,若想把一个定位属性为absolute的元素定位于其父级元素内,只要满意两个前提,
第一:设定TRBL
第二:父级设定Position属性
下面的这个总结十分主要,能够包管你在用absolue结构页面的时分,不会错位,而且跟着扫瞄器的巨细大概显现器分辩率的巨细,而不产生改动。
只需有一点不满意,元素就会以扫瞄器左上角为原点,这就是初学者简单出错的一点,已定位好的板块,当扫瞄器的巨细改动,父级元素会随之改动,可是设定Position属性为absolute的板块和父级元素的地位产生改动,错位了,这就是由于此时元素以扫瞄器的右上角为原点的缘故原由。
初学者很简单出错的是,不分明Position属性为absolute的板块,若想定位到父级板块中,而且当扫瞄器的巨细改动或显现器的分辩率改动,结构不产生改动,是必要满意两个前提的,只需有一点不满意,元素就会以扫瞄器左上角为原点,从而招致页面结构错位。
【position:relative】
意义是绝对定位,他是默许参照父级的原始点为原始点,无父级则以文本流的按次在上一个元素的底部为原始点,共同TRBL举行定位,当父级内有padding等CSS属性时,以后级的原始点则参照父级内容区的原始点举行定位,有以上司性:
1)假如没有TRBL,以父级的左上角,在没有父级的时分,他是参照扫瞄器左上角(到这里和absolute第一条一样),假如在没有父级元素的情形下,存在文本,则以文本的底部为原始点举行定位并将笔墨断开(和absolut分歧)。
2)假如设定TRBL,而且父级没有设定position属性,仍然以父级的左上角为原点举行定位(和absolut分歧)
3)假如设定TRBL,而且父级设定position属性(不管是absolute仍是relative),则以父级的左上角为原点举行定位,地位由TRBL决意(前半段和absolut一样)。假如父级有Padding属性,那末就之内容地区的左上角为原点,举行定位(后半段和absolut分歧)。
以上三点能够总结出,不管父级存在不存在,不管有无TRBL,均是以父级的左上角举行定位,可是父级的Padding属性会对其影响。
综合下面对relative的叙说,我们就能够将position属性为relative的DIV视成能够用TRBL举行定位的的一般DIV,大概说只需将我们平常
结构页面的div的CSS属性中加上position:relative后,就不但是用float结构页面了,还能够用TRBL举行结构页面了,大概说加上
position:relative的DIV也能够像一般的DIV举行结构页面了,只不外还能够用TRBL举行结构页面。可是position属性为absolute不成以
用来结构页面,由于假如用来结构的话,一切的DIV都相对扫瞄器的左上角定位了,以是只能用于将某个元素定位于属性为absolute的
元素的外部某个地位,如许我们就能够总结对照主要的结论
属性为relative的元素能够用来结构页面,属性为absolute的元素用来定位某元素在父级中的地位
既然属性为absolute的元素用来定位某元素在父级中地位,就少不了TRBL,这时候候依据一入手下手讲的absolute的第三条,假如父级元素没有
position属性那末absolute元素就会离开父级元素,可是假如是结构页面,父级元素position的属性又不克不及为absolute,否则就会以扫瞄
器左上角为原点了,以是父级元素的position属性只能为relative!
=============================================
总结:假如用position来结构页面,父级元素的position属性必需为relative,而定位于父级外部某个地位的元素,最好用absolute,因为它不受父级元素的padding的属性影响,固然你也能够用position,不外到时分盘算的时分不要健忘padding的值。
=============================================
下节课我将拿第5节的例子,给人人讲讲,怎样用position结构
</p>
你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。 是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。 经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅. 学Dreamweaver技术的过程其实是一个增加信心的过程。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 学Dreamweaver技术的过程其实是一个增加信心的过程。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
页:
[1]