从文档流认识html

匆匆过客 提交于 2020-03-26 23:51:36

写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:继承值,对象将继承其父对象相应的值。

 

原文:http://jingyan.baidu.com/article/ce436649eae6673773afd3ab.html

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!