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

     

  • 相关阅读:
    第01组-Alpha冲刺总结
    pypy windows安装scrapy
    Python:pip无法使用No module named '_sysconfigdata_m_linux_x86_64-linux-gnu'
    Jenkins+Ansible+Gitlab:通过curl自动推送文件&gitlab自动触发构建
    zabbix安装及问题小结
    虚拟机中的jenkins无法访问&Nginx配置
    centos7 安装gitlab及简单配置
    kerberos&LDAP实现免密码登录搭建
    kerberos&ssh 原理、免密登录搭建
    自启动脚本/etc/rc.local文件
  • 原文地址:https://www.cnblogs.com/cjlalala/p/5263566.html
Copyright © 2020-2023  润新知