css定位一点小结

很多是手册上的，只加了些自己在应用中遇到的情况的一点小结。

一切皆为框：

      div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 、strong、img和b 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，“行”就变为“框”了；而将 dis属性高为 inline-block 则可以变“行内元素”变为介于“行”与框之间，是行当具有框，更相符“行内框”。

     但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

             <div>
                 some text
                 <p>Some more text.</p>
             </div>

在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

定位类型：

      定位用到的两个属性为 position,float。

      position 属性值有4个，即这一属性就可把定位分成四类：

      static （默认值，不偏移）

      元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

      relative （相对元素“原来”位置起点定位）

      元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

      absolute （相对最近已定位祖先元素）

      元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

      fixed （相对窗口偏移）

      元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

      在页面广告时常用，如固定广告在窗口底部分。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

 

     float属性很重要，很常用。值有left,right,none.其设置的效果就如字面的函义。但也由于它“浮动”所以控制起来也不容易。清除上个元素float属性的影响可以用<p class="clear"></p>。

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

定位属性：

      定位类型设置完后，就要开始设置定位的具体位置了。

      top,right,bottom,left就没什么说的。

      overflow常用属性有三个：hide,scroll,auto；在固定大小形状的区域，而不让内容溢出时很有用。

      而clip就可以代替width与height来固定一个区域，clip:rect(top right bottom left)。

      vertical-align属性用于设置垂直对齐（相对水平对齐的有align,text-align）。这还可以轻松定义图像与文件对齐方式，因为图像也是“行”元素。

      index-z有些特异了，也就能做些特异的事。可以说是给网页以立体感的一种尝试了，可以设立第三维坐标，设置背景层次。默认值为0.值大的会覆盖值小的。

其他：

      这些属性看起来也还好理解，可到实际中就千变万化了，有些还真让人摸不着头脑。

      相对位置（定位）的你级框及作用框属性还多试试，可以一起设着看。

其他影响位置的属性：

      line-height行矩，只针对行元素；而height针对其他所有元素;一行文字所在的一个逻辑区域是行元素，其他的元素都是块元素。

      font:12px/1.5 Arial 表示文字12像素，1.5倍行高，Arial字体。