CSS学习篇核心之——定位

当前位置 : 首页 > 网页制作 > CSS > CSS学习篇核心之——定位

CSS学习篇核心之——定位

来源: 作者: 时间:2016-01-28 09:27
概述 关于CSS样式的进一步学习,我们今天主要学习下CSS的定位知识,定位就是定义我们的元素框由原来的位置在移动后所处的位置。关于定位有三种相对定位、绝对定位和浮动。 相对定


概述

关于CSS样式的进一步学习,我们今天主要学习下CSS的定位知识,定位就是定义我们的元素框由原来的位置在移动后所处的位置。关于定位有三种相对定位、绝对定位和浮动。

相对定位

相对定位相对来说是比较简单的,如果对一个元素进行相对定位,它首先出现在其初始位置,然后可以设置它垂直货水平位置,让这个元素“相对于”它的起点进行移动。

我们对框2进行设置,将 top 设置为20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}



\

需要注意的是,在使用相对定位时,无论怎么进行移动,框2仍然会占据原来的空间,即原来的空间依然会保留着,但是框2会覆盖框3这就是相对定位。

绝对定位

设置为绝对定位后,元素原先所在的正常的文档流中所占有地空见就会关闭,就像该元素原来不村子一样,然后根据最近的已定位的祖先元素进行移动。

我们还是对框2进行移动,将tZ喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcAogyejWw86qIDIwcHijrCAgbGVmdCDJ6NbDzqogMzAgz/HL2KGjPC9wPgo8cD4gPC9wPgo8cD48L3A+CjxwcmUgY2xhc3M9"brush:java;">#box_relative { position: absolute; left: 30px; top: 20px; }

\

当对框2进行设置为绝对定位时,首先框2原来所占的空见就会关闭,框2原来的位置就不村子了,所以框3就占据了框2的位置,接下来设置框2的移动,框2移动相对于祖先元素,这个祖先元素就是保护框1、2、3的这个空白块,框2相对于父元素空白框进行移动,移动完成后就成图所示那样。

关于绝对定位2个重点,一是原来的框2所在空见不存在了,其它元素布局按照普通流的定位重新移动,即框3占据框2原先关闭的位置;第二就是框2移动是相对于祖先元素,如果没有祖先元素,那么它的位置相对于最初的包含块。

定位比较

相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块;相对定位原先空见仍然存在,绝对定位原先空间不再存在。

浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

当把框 1向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘,如图

\

再看下图,当框 1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2从视图中消失。

如果把所有三个框都向左移动,那么框1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

\

如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:


n块鷄坐un篫喎CSS中的重中之重,所以需要特别的重视,定位首先需要理解,并能区分相对定位和绝对定位有什么不同,在理解的角度上我们然后才能慢慢的去应用,最后通过应用去彻底掌握它。

Tag:
上一篇:容易被忽略CSS特性
下一篇:CSS整理
网友评论

<