仓酷云

标题: 带来一篇CSS实例教程:定位(position)结构页面 [打印本页]

作者: 再见西城 时间: 2015-1-15 23:26
标题: 带来一篇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。

作者: 不帅 时间: 2015-1-17 22:39
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 金色的骷髅 时间: 2015-1-21 15:15
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 谁可相欹 时间: 2015-1-30 20:18
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 海妖 时间: 2015-2-16 23:25
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 灵魂腐蚀 时间: 2015-3-5 13:04
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 只想知道 时间: 2015-3-12 07:54
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 简单生活 时间: 2015-3-19 19:01
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

欢迎光临仓酷云 (http://ckuyun.com/)