zoukankan      html  css  js  c++  java
  • 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脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它 。

     

  • 相关阅读:
    Head First设计模式(观察者模式Observer)
    Head First设计模式(装饰者模式)
    Head First设计模式
    Head First设计模式 单件模式 独一无二的对象
    .NET 设计规范.NET约定、惯用法与模式8.使用规范
    .NET 设计规范.NET约定、惯用法与模式附录:C#编程风格约定
    设计模式 一 引言
    .NET 设计规范.NET约定、惯用法与模式7.异常
    Head First设计模式 工厂模式 烘烤OO的精华
    前端IDE中Emmet插件快捷输入HTML代码
  • 原文地址:https://www.cnblogs.com/cjlalala/p/5263566.html
Copyright © 2011-2022 走看看