仓酷云

标题: 给大家带来CSS网页结构：关于定位（position） [打印本页]

作者: 再见西城 时间: 2015-1-16 00:12
标题: 给大家带来CSS网页结构：关于定位（position）
层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
利用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年夜部分才能是基于元素的“父子”干系，在的家属树中，每一个元素都是另外一个元素的“父”大概“子”大概二者都是。比方：body既是html的子元素，又是h1的父元素，而html就是h1的先人，h1则是html的子孙。
Body是一切扫瞄器能显现的元素的先人，而html是一切元素的先人，也称为“根元素”。

那为何定位了的元素还老是以扫瞄器窗口的左上角为坐标呢？
由于并非每一个元素都能为厥后辈元素天生一个包括块。
创建包括块的划定规矩以下：

“根元素”的包括块（也叫初始包括块）由用户代办署理天生，在HTML中，根元素是HTML元素，只管有的扫瞄器会不准确地利用body元素。
关于那些未相对定位的非根元从来说，元素的包括块设置为比来的块级先人元素的内容区边缘。
对那些利用相对（absolute）作为定位（postition）的非根元素，包括块设为比来的定位（postition）不是运动（static）的先人元素（任何范例）。有以下几种情形：

假如先人元素是块级（block）元素，包括块设为先人元素的添补（padding）边缘，也就是被边框（border）束缚的地区。
假如先人元素是内联（inline）元素，包括块设为先人元素的内容边缘。

关于包括块，最主要的是要记着它为一切后代元素创建了一个格局编排的高低文。另外一个主要方面是，元素可定位于它们的包括块以外。
因而，相对定位的元素常常以扫瞄器可视地区的左上为坐标原点来举行定位了。

在CSS中但是利用position属性来在分歧的定位范例当选择。

语法：
position:static|absolute|fixed|relative|inherit

其各参数寄义是：

static:静态（默许），无特别定位。
relative:绝对，工具不成层叠，但将根据left，right，top，bottom等属性在一般文档流中偏移地位
absolute:相对，将工具从文档流中拖出，利用left，right，top，bottom等属性举行相对定位。而其层叠经由过程z-index属性界说。此时工具不具有边距，但仍有补白和边框。
fixed:悬浮，使元素流动在屏幕的某个地位，其包括块是可视地区自己，因而它不随转动条的转动而转动。（IE5.5+不撑持此属性。）
inherit:这个值从其下级元素承继失掉。

示例：

div{...}{position:absolute;bottom:1in;left:1in;right:1in;top:1in;}
[attach]292161[/attach][attach]292162[/attach]div{...}{position:relative;top:-3px;left:6px;}

既然懂得了包括块的观点，那末关于绝对定位和相对定位的干系，就很好把握了。
比方，如今必要把页面内容全体居中，然后再将个中某些层相对定位的话，那就要把最表面的层设置定位属性。
<body>
<divid="box">
<divid="nav">
<p>每一个显现元素都能够用定位的办法来形貌，而其地位由此元素的<strong>包括块</strong>来决意的。</p>
</div>
</div>
</body>
此时，假如你要对nav相对定位，则需设置css：
[attach]292161[/attach][attach]292162[/attach]body{...}{

margin:0;
padding:0;
text-align:center;

}
[attach]292161[/attach][attach]292162[/attach]#box{...}{
background:#ff0;

position:relative;/**//*使box层成为其子孙元素的包括块*/
width:500px;
height:200px;
margin:0auto;
}
[attach]292161[/attach][attach]292162[/attach]#nav{...}{
background:#ccc;
[attach]292163[/attach][attach]292164[/attach]position:absolute;/**//*nav层将在box层的边框局限内相对定位*/
top:20px;
left:40px;
width:200px;
}

其显现效果如所示。

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

本文部分常识来历于：《CSS威望指南》
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。

作者: 再见西城 时间: 2015-1-18 05:31
由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。

作者: 愤怒的大鸟 时间: 2015-1-25 20:57
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 飘飘悠悠 时间: 2015-2-4 06:09
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 因胸联盟 时间: 2015-2-9 17:08
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 小女巫 时间: 2015-2-27 12:26
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 深爱那片海 时间: 2015-3-9 07:46
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 莫相离 时间: 2015-3-16 22:49
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 只想知道 时间: 2015-3-23 08:47
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

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