zoukankan      html  css  js  c++  java
  • 文档流

    写html,css的同学应该需要清楚什么是文档流。文档流:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流。

        每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。内联元素也不会独有一行. 一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位.
    然则在IE中浮动元素也存在于文档流中。

      浮动元素不占任何正常文档流空间,而浮动元素的定位照样基于正常的文档流,然后从文档流中抽出并尽能够远的挪动至左侧或许右侧。当一个元素脱离正常文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。 

      基于文档流,理解以下的定位形式:

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

      绝对定位:即完全离开文档流, 相关于position属性非static值的比来父级元素进行偏移。

          固定定位:即完全离开文档流,相关于视区进行偏移。

        文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。
    网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流,这就要用到CSS中属性position来控制。

    看看CSS 2.0对position的定义:检索对象的定位方式。共有4种取值。

      absolute:绝对定位。将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。

      fixed:固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。当对象定位在浏览器窗口以外,浏览器不会因此显示滚动条,而当滚动条滚动时,对象始终固定在原来位置。
      relative:相对定位。对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。 

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

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

     

    要很好的理解上面这段话,可以用排除法。CSS的定位机制有3种:普通流浮动(float:left/right/none)和定位 (position:static/relative/absolute/)。

     

    普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局。

    例:

    <div id=”01”></div><div id=”02”></div><div></div>

     很显然这是最普通的文档流,从左到右,一个挨一个按照顺序01先,02其次,03最后排列。

      一旦给其中的某个DIV进行FLOAT属性或者absolute定位(不包括static/relative,这两个依然保持正常的文档流),则它完全脱离文档流,不占空间。

    例:

    为了能更好辨认,我分别给01绿色,02灰色,03黄色。然后再给01左浮动。结果,01脱离了文档流,完全不占空间,所以02顺势顶替了01原来的位置,结果02被01盖住了。

    同理,absolute定位跟FLOAT一样,脱离了文档流,不再占原来文档流的空间了。再举一个大家在日常经常遇到的问题来印证—高度自适应

    反复想一想,高度自适应的原理其实就是这个:

    <div id=”a”>

      <div id=”b”>这是b</div>

      <div id=”c”>这是c</div>

    </div>

    这个结构是a包住b和c,颜色不变,a的高度为自动,b的高度为100,C的高度为500。b和c都为左浮动

    很明显a没有被撑开了。原因是它们浮动了就不再占空间了。既然没有空间可占,那就等于容器里没有东西,所以不撑开。解决办法是在黄色DIV的后面加个DIV,然后清除浮动。让他有空间可占,自然就撑开了。试试!

    总结:

     

    1、  CSS的定位机制有3种:普通流、浮动和定位。

    2、  文档流:从上到下,从左到右,一个挨一个的简单或者叫正常布局。

    3、  定位:(position)

      Static:保持文档流。

      Relative:相对本身的原始位置发生位移且保持文档流,占空间。

      Absolute:脱离文档流,不占空间且相对于其包含块来定位。

    4、  浮动:(flaot)脱离文档流,不占空间。

    5、  以前总是觉得position:static这个属性很多余,现在看来他的作用就是让元素保持文档流的!

  • 相关阅读:
    poj 3616 Milking Time
    poj 3176 Cow Bowling
    poj 2229 Sumsets
    poj 2385 Apple Catching
    poj 3280 Cheapest Palindrome
    hdu 1530 Maximum Clique
    hdu 1102 Constructing Roads
    codeforces 592B The Monster and the Squirrel
    CDOJ 1221 Ancient Go
    hdu 1151 Air Raid(二分图最小路径覆盖)
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5297188.html
Copyright © 2011-2022 走看看