DIV教程之网页结构相对定位(position)轻松复杂

只看该作者 · 发表于 2015-1-16 00:04:15

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
利用CSS来定位页面内层的地位，一向是对照难以把握的事变，良多时分，常常被相对定位的元素，老是以扫瞄器的左上角为坐标原点，此时，假如扫瞄器的巨细改动，被界说的层就会偏离计划想要的地位，让人很挠头。
实在，要想把持好层的相对定位，只需了解CSS中关于定位（position）的界说，统统就会变得轻松复杂。
CSS中关于定位（position）是如许界说的：
定位（position）同意用户准确界说元素框呈现的绝对地位，能够相对它一般呈现的地位，相对其下级元素，相对另外一个元素，大概相对扫瞄器视窗自己。每一个显现元素都能够用定位的办法来形貌，而其地位由此元素的包括块来决意的。
包括块（containingblock）是格局编排产生的联系关系场景，比方，一个加粗的元素的包括块能够是该元素所呈现的段落，如所示。

登录/注册后可看大图

在了解定位之前，起首，要先了解HTML文件的布局，比方有一个html文件内容以下：

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>文档布局</title></head><body><h1>CSS划定规矩</h1><p>款式表由一些<strong>款式划定规矩</strong>构成。</p><ul><li>选择符<ul><li>类选择符</li><li>ID选择符</li><li><em>包括</em>选择符</li></ul></li><li>属性</li><li>值</li></ul></ul></body></html>

复制代码

此文档对应的树型布局，如所示。

登录/注册后可看大图

CSS年夜部分才能是基于元素的“父子”干系，在的家属树中，每一个元素都是另外一个元素的“父”大概“子”大概2者都是。比方：body既是html的子元素，又是h1的父元素，而html就是h1的先人，h1则是html的子孙。
Body是一切扫瞄器能显现的元素的先人，而html是一切元素的先人，也称为“根元素”。
那为何定位了的元素还老是以扫瞄器窗口的左上角为坐标呢？由于并非每一个元素都能为厥后辈元素天生一个包括块。
创建包括块的划定规矩以下：

根元素”的包括块（也叫初始包括块）由用户代办署理天生，在HTML中，根元素是HTML元素，只管有的扫瞄器会不准确地利用body元素。
关于那些未相对定位的非根元从来说，元素的包括块设置为比来的块级先人元素的内容区边缘。
对那些利用相对（absolute）作为定位（postition）的非根元素，包括块设为比来的定位（postition）不是运动（static）的先人元素（任何范例）。有以下几种情形：
a.假如先人元素是块级（block）元素，包括块设为先人元素的添补（padding）边缘，也就是被边框（border）束缚的地区
b.假如先人元素是内联（inline）元素，包括块设为先人元素的内容边缘。因而，相对定位的元素常常以扫瞄器可视地区的左上为坐标原点来举行定位了。

在CSS中但是利用position属性来在分歧的定位范例当选择。
语法：
position:static|absolute|fixed|relative|inherit
其各参数寄义是：
static:静态（默许），无特别定位。
relative:绝对，工具不成层叠，但将根据left，right，top，bottom等属性在一般文档流中偏移地位
absolute:相对，将工具从文档流中拖出，经由过程width、height、left，right，top，bottom等属性与margin、padding、border举行相对定位，相对定位的元素能够有界限，但这些界限不紧缩。而其层叠经由过程z-index属性界说。
fixed:悬浮，使元素流动在屏幕的某个地位，其包括块是可视地区自己，因而它不随转动条的转动而转动。（IE5.5+不撑持此属性。）
inherit:这个值从其下级元素承继失掉。
示例：

div{position:absolute;bottom:1in;left:1in;right:1in;top:1in;}div{position:relative;top:-3px;left:6px;}

复制代码

既然懂得了包括块的观点，那末关于绝对定位和相对定位的干系，就很好把握了。
比方，如今必要把页面内容全体居中，然后再将个中某些层相对定位的话，那就要把最表面的层设置定位属性。

<body><divid="box"><divid="nav"><p>每一个显现元素都能够用定位的办法来形貌，而其地位由此元素的<strong>包括块</strong>来决意的。</p></div></div></body>

复制代码

此时，假如你要对nav相对定位，则需设置css：

body{margin:0;padding:0;text-align:center;}#box{background:#ff0;position:relative;/*使box层成为其子孙元素的包括块*/width:500px;height:200px;margin:0auto;}#nav{background:#ccc;position:absolute;/*nav层将在box层的边框局限内相对定位*/top:20px;left:40px;width:200px;}

复制代码

其显现效果如所示。

登录/注册后可看大图

因而，把握了包括块的观点，定位就变得不那末坚苦了。

可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

只看该作者 · 发表于 2015-1-18 05:02:15

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-2-3 12:25:17

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-2-9 01:28:59

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

只看该作者 · 发表于 2015-2-26 17:48:27

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

只看该作者 · 发表于 2015-3-8 16:36:49

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-16 07:54:12

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-3-22 21:40:27

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之网页结构相对定位(position)轻松复杂

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子