2、HTML普通流/文档流

普通流(normal flow):

    将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为普通流/文档流。

    

    内联元素不会独占一行,而每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。浮动元素不占任何正常文档流空间,而浮动元素的定位照样基于正常的文档流,当一个元素脱离正常文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

position属性值:

        absolute:绝对定位。完全离开文档流,使用left,right,top,bottom等属性相对于其最接近的一个具有定位设置(即position值不为默认值static)的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。

        relative:相对定位,原本所占的空间仍保留。对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。

        fixed:固定定位。完全离开文档流,对象定位遵从绝对(absolute)方式,但是要遵守一些规范。当对象定位在浏览器窗口以外,浏览器不会因此显示滚动条,而当滚动条滚动时,对象始终固定在原来位置,即相关于视区进行偏移。

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

        inherit:继承值,对象将继承其父对象相应的值。

 

  注意:使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它 。

 

posted @ 2016-03-10 21:32  cjlalala  阅读(3325)  评论(0编辑  收藏