仓酷云

标题: 来讲讲：CSS基本教程:CSS中的定位（position） [打印本页]

作者: 谁可相欹 时间: 2015-1-16 00:16
标题: 来讲讲：CSS基本教程:CSS中的定位（position）
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
　　利用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是一切元素的先人，也称为“根元素”。

　　那为何定位了的元素还老是以扫瞄器窗口的左上角为坐标呢？
　　由于并非每一个元素都能为厥后辈元素天生一个包括块。
　　创建包括块的划定规矩以下：
　　1.根元素”的包括块（也叫初始包括块）由用户代办署理天生，在HTML中，根元素是HTML元素，只管有的扫瞄器会不准确地利用body元素。
　　2.关于那些未相对定位的非根元从来说，元素的包括块设置为比来的块级先人元素的内容区边缘。
　　3.对那些利用相对（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;
}

　　其显现效果如所示。

　　因而，把握了包括块的观点，定位就变得不那末坚苦了。
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。

作者: 冷月葬花魂 时间: 2015-1-18 05:51
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 若天明 时间: 2015-2-4 08:53
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 若相依 时间: 2015-2-9 20:55
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 只想知道 时间: 2015-2-27 21:44
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 活着的死人 时间: 2015-3-9 15:55
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 再现理想 时间: 2015-3-17 00:44
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 莫相离 时间: 2015-3-23 11:34
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

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