DIV教程之CSS网页定位教程:具体进修定位常识
所有的设计第一步就是构思，构思好了。网页制造poluoluo文章简介：CSS为定位和浮动供应了一些属性，使用这些属性，能够创建列式结构，将结构的一部分与另外一部分堆叠，还能够完成多年来一般必要利用多个表格才干完成的义务。
CSS定位(Positioning)属性同意你对元素举行定位。
CSS定位和浮动
CSS为定位和浮动供应了一些属性，使用这些属性，能够创建列式结构，将结构的一部分与另外一部分堆叠，还能够完成多年来一般必要利用多个表格才干完成的义务。
定位的基础头脑很复杂，它同意你界说元素框相对其一般地位应当呈现的地位，大概相对父元素、另外一个元素乃至扫瞄器窗口自己的地位。明显，这个功效十分壮大，也很让人受惊。要晓得，用户代办署理对CSS2中定位的撑持远胜于对别的方面的撑持，对此不该感应奇异。
另外一方面，CSS1中初次提出了浮动，它以Netscape在Web开展早期增添的一个功效为基本。浮动不完整是定位，不外，它固然也不是一般流结构。我们会在前面的章节中明白浮动的寄义。
统统皆为框
p、h1或p元平素常被称为块级元素。这意味着这些元素显现为一块内容，即“块框”。与之相反，span和strong等元素称为“行内元素”，这是由于它们的内容显现外行中，即“行内框”。
您可使用display属性改动天生的框的范例。这意味着，经由过程将display属性设置为block，可让行内元素（好比<a>元素）体现得像块级元素一样。还能够经由过程把display设置为none，让天生的元素基本没有框。如许的话，该框及其一切内容就不再显现，不占用文档中的空间。
可是在一种情形下，即便没有举行显式界说，也会创立块级元素。这类情形产生在把一些文本增加到一个块级元素（好比p）的开首。即便没有把这些文本界说为段落，它也会被看成段落看待：
<p>
sometext
<p>Somemoretext.</p>
</p>
在这类情形下，这个框称为知名块框，由于它不与专门界说的元素相干联。
块级元素的文本行也会产生相似的情形。假定有一个包括三行文本的段落。每行文本构成一个知名框。没法间接对知名块或行框使用款式，由于没有能够使用款式的中央（注重，行框和行内框是两个观点）。可是，这有助于了解在屏幕上看到的一切器材都构成某种框。
CSS定位机制
CSS有三种基础的定位机制：一般流、浮动和相对定位。
除非专门指定，不然一切框都在一般流中定位。也就是说，一般流中的元素的地位由元素在X(HTML)中的地位决意。
块级框从上到下一个接一个地分列，框之间的垂直间隔是由框的垂直外边距盘算出来。
行内框在一行中程度安排。可使用程度内边距、边框和外边距调剂它们的间距。可是，垂直内边距、边框和外边距不影响行内框的高度。由一行构成的程度框称为行框（LineBox），行框的高度老是足以包容它包括的一切行内框。不外，设置行高能够增添这个框的高度。
鄙人面的章节，我们会为您具体解说绝对定位、相对定位和浮动。
CSSposition属性
经由过程利用position属性，我们能够选择4中分歧范例的定位，这会影响元素框天生的体例。
position属性值的寄义：
static
元素框一般天生。块级元素天生一个矩形框，作为文档流的一部分，行内元素则会创立一个或多个行框，置于其父元素中。
relative
元素框偏移某个间隔。元素仍坚持其不决位前的外形，它底本所占的空间仍保存。
absolute
元素框从文档流完整删除，并相对其包括块定位。包括块多是文档中的另外一个元素大概是初始包括块。元素本来在一般文档流中所占的空间会封闭，就仿佛元素本来不存在一样。元素定位后天生一个块级框，而不管本来它在一般流中天生何品种型的框。
fixed
元素框的体现相似于将position设置为absolute，不外其包括块是视窗自己。
提醒：绝对定位实践上被看做一般流定位模子的一部分，由于元素的地位相对它在一般流中的地位。
CSS定位属性
CSS定位属性同意你对元素举行定位。
CSS定位属性同意你对元素举行定位。
属性形貌position把元素安排到一个静态的、绝对的、相对的、或流动的地位中。top界说了一个定位元素的上外边距界限与其包括块上界限之间的偏移。right界说了定位元素右外边距界限与其包括块右侧界之间的偏移。bottom界说了定位元素下外边距界限与其包括块下界限之间的偏移。left界说了定位元素左外边距界限与其包括块右边界之间的偏移。overflow设置当元素的内容溢出其地区时产生的事变。clip设置元素的外形。元素被剪进这个外形当中，然后显现出来。vertical-align设置元素的垂直对齐体例。z-index设置元素的堆叠按次。
网页制造poluoluo文章简介：CSS为定位和浮动供应了一些属性，使用这些属性，能够创建列式结构，将结构的一部分与另外一部分堆叠，还能够完成多年来一般必要利用多个表格才干完成的义务。
CSS绝对定位
绝对定位是一个十分简单把握的观点。假如对一个元素举行绝对定位，它将呈现在它地点的地位上。然后，能够经由过程设置垂直或程度地位，让这个元素“相对”它的出发点举行挪动。
假如将top设置为20px，那末框将在原地位顶手下面20像素的中央。假如left设置为30像素，那末会在元素右边创立30像素的空间，也就是将元素向右挪动。
#box_relative{position:relative;left:30px;top:20px;}以下图所示：
注重，在利用绝对定位时，不管是不是举行挪动，元素仍旧占有本来的空间。因而，挪动元素会招致它掩盖别的框。
网页制造poluoluo文章简介：CSS为定位和浮动供应了一些属性，使用这些属性，能够创建列式结构，将结构的一部分与另外一部分堆叠，还能够完成多年来一般必要利用多个表格才干完成的义务。
设置为相对定位的元素框从文档流完整删除，并相对其包括块定位，包括块多是文档中的另外一个元素大概是初始包括块。元素本来在一般文档流中所占的空间会封闭，就仿佛该元素本来不存在一样。元素定位后天生一个块级框，而不管本来它在一般流中天生何品种型的框。
CSS相对定位
相对定位使元素的地位与文档流有关，因而不占有空间。这一点与绝对定位分歧，绝对定位实践上被看做一般流定位模子的一部分，由于元素的地位相对它在一般流中的地位。
一般流中别的元素的结构就像相对定位的元素不存在一样：
#box_relative{position:absolute;left:30px;top:20px;}以下图所示：
网页制造poluoluo文章简介：CSS为定位和浮动供应了一些属性，使用这些属性，能够创建列式结构，将结构的一部分与另外一部分堆叠，还能够完成多年来一般必要利用多个表格才干完成的义务。
浮动的框能够向左或向右挪动，直到它的外边沿碰着包括框或另外一个浮动框的边框为止。因为浮动框不在文档的一般流中，以是文档的一般流中的块框体现得就像浮动框不存在一样。
CSS浮动
请看下图，当把框1向右浮动时，它离开文档流而且向右挪动，直到它的右侧缘碰着包括框的右侧缘：
再请看下图，当框1向左浮动时，它离开文档流而且向左挪动，直到它的右边缘碰着包括框的右边缘。由于它不再处于文档流中，以是它不占有空间，实践上掩盖住了框2，使框2从视图中消散。
假如把一切三个框都向左挪动，那末框1向左浮动直到碰着包括框，别的两个框向左浮动直到碰着前一个浮动框。
以下图所示，假如包括框太窄，没法包容程度分列的三个浮动元素，那末别的浮动块向下挪动，直到有充足的空间。假如浮动元素的高度分歧，那末当它们向下挪动时大概被别的浮动元素“卡住”：
CSSfloat属性
在CSS中，我们经由过程float属性完成元素的浮动。
如需更多有关float属性的常识，请会见参考手册：CSSfloat属性。
行框和清算
浮动框中间的行框被延长，从而给浮动框留出空间，行框环绕浮动框。
因而，创立浮动框可使文本环绕图象：
要想制止行框环绕浮动框，必要对该框使用clear属性。clear属性的值能够是left、right、both或none，它暗示框的哪些边不该该挨着浮动框。
为了完成这类效果，在被清算的元素的上外边距上增加充足的空间，使元素的顶边沿垂直下落到浮动框上面：
这是一个有效的工具，它让四周的元素为浮动元素留出空间。
让我们更具体地看看浮动和清算。假定但愿让一个图片浮动到文本块的右边，而且但愿这幅图片和文本包括在另外一个具有背景色彩和边框的元素中。您大概编写上面的代码：
.news{background-color:gray;border:solid1pxblack;}.newsimg{float:left;}.newsp{float:right;}<pclass="news"></p></p>如许能够完成我们但愿的效果，可是必要增加过剩的代码。经常有元素能够使用clear，可是偶然候不能不为了举行结构而增加偶然义的标志。
不外我们另有另外一种举措，那就是对容器p举行浮动：
.news{background-color:gray;border:solid1pxblack;float:left;}.newsimg{float:left;}.newsp{float:right;}<pclass="news"><imgsrc="news-pic.jpg"/><p>sometext</p></p>如许会失掉我们但愿的效果。不幸的是，下一个元素会遭到这个浮动元素的影响。为懂得决这个成绩，有些人选择对结构中的一切器材举行浮动，然后利用得当的成心义的元素（经常是站点的页脚）对这些浮动举行清算。这有助于削减或打消不用要的标志。
现实上，W3School站点上的一切页面都接纳了这类手艺，假如您翻开我们利用CSS文件，您会看到我们对页脚的p举行了清算，而页脚下面的三个p都向左浮动。
相对定位的元素的地位相对比来的已定位先人元素，假如元素没有已定位的先人元素，那末它的地位相对最后的包括块。
关于定位的次要成绩是要记着每种定位的意义。以是，如今让我们温习一放学过的常识吧：绝对定位是“相对”元素在文档中的初始地位，而相对定位是“相对”比来的已定位先人元素，假如不存在已定位的先人元素，那末“相对”最后的包括块。
正文：依据用户代办署理的分歧，最后的包括块多是画布或HTML元素。
提醒：由于相对定位的框与文档流有关，以是它们能够掩盖页面上的别的元素。能够经由过程设置z-index属性来把持这些框的堆放序次。
</p>
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
页:
[1]