CSS学习篇核心之——定位

概述

 

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

 

相对定位

 

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

 

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

 

 

[css] view plaincopy
 
  1. #box_relative {  
  2.   positionrelative;  
  3.   left: 30px;  
  4.   top: 20px;  
  5. }  



 

 

 

 

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

 

 

绝对定位

 

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

 

    我们还是对框2进行移动,将top 设置为 20px,  left 设置为 30 像素。

 

 

[css] view plaincopy
 
  1. #box_relative {  
  2.   positionabsolute;  
  3.   left: 30px;  
  4.   top: 20px;  
  5. }  



 

 

 

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

 

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

 

定位比较

 

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

 

 

浮动

      

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

 

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

 

 

 

      

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

 

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

 

 

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

 

 

总之

 

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。