css - 文档流

作者: 廖马儿 | 来源:发表于2017-12-24 23:13 被阅读7次

http://segmentfault.com/blog/trigkit4/1190000000680773
文档流是文档中可显示对象在排列时所占用的位置。

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序,该在什么位置就在什么位置,也可以按照上面的意思理解,自上而下,自左到右的顺序)

比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。 网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域。

元素在没有浮动和绝对定位时的正常布局方式,(从左到右,从上到下)。


css中脱离文档流

css脱离文档流到底是什么意思,脱离文档流就不占据空间了吗?
脱离文档流是不是指该元素从dom树中脱离?

解答:https://www.zhihu.com/question/24529373/answer/29135021

总结:脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute 
positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。

相关文章

  • css文档流

    文档流:文档流就是文档内元素流动的方向 内联元素文档流 内联元素的文档流是从左往右流动的,当一行满了之后会另起一行...

  • css - 文档流

    http://segmentfault.com/blog/trigkit4/1190000000680773文档流...

  • CSS文档流

    文档流 流动方向inline(行内元素)从左到右,到达最右边才会换行;block(块级元素)从上到下,每一行都另起...

  • 浮动、定位

    1 . 文档流的概念指什么,有哪种方式可以让元素脱离文档流 CSS普通流/文档流(normal flow)是元素按...

  • HTMLCSS学习笔记(七)-- 定位与锚点

    CSS文档流 CSS 有三种基本的定位机制:普通流、浮动流、定位流 POSTION position定位属性,检索...

  • CSS布局

    CSS入门(3) CSS的常见布局 CSS常见布局使用display属性(文档流)+position属性(定位)+...

  • CSS:关于定位

    什么是文档流(Normal flow) 在学习CSS过程中,遇到了"文档流(Normal flow)"这个概念,当...

  • CSS定位与浮动

    CSS定位机制 CSS 有三种定位机制 普通流(文档流)、浮动和绝对定位。浮动和绝对定位可以让一个元素脱离文档流。...

  • css之position与文档流

    Css的定位机制分为普通流(文档流)、浮动(float)、定位(position);其中普通流就是文档流,在H...

  • CSS小技巧——高度与文档流

    在CSS里,一个元素的高度是由其内部文档流元素高度总和决定的!那么文档流是什么呢?(加border可检测) 文档流...

网友评论

    本文标题:css - 文档流

    本文链接:https://www.haomeiwen.com/subject/gtzhgxtx.html