三、简单了解文档流


了解文档流是为了在父盒子中部署内容即布局子盒子做准备。


一个帖子，得先有一个父盒子，然后帖子所用到的内容就安放在这个父盒子里。盒子是HTML5的理念，指像 div 这样的标签，它们都是用来装文本、图片甚至装同类盒子的，所以又叫容器。父盒子里面的内容也是一个一个的盒子，可以是 div，p，img，table，input等等有可视界面的元素（标签），很多时候还会用到一些符号类的元素，如 br、hr 等等。这些内容，都涉及到文档流的问题。


文档流，就是文档中盒子自然安放时它本应在的位置。我们前面的父盒子 id="papa" 的那个 div，它如果没有做任何定位设置，则它的出现位置就和发一个普通文字帖时的状况一样，是自然而然的文档流位置。但HTML帖子宽度尺寸会突破预设留给它的横向空间，因此，为了美观，我们用了 position: relative; 这样的相对定位方式，并通过 left: -214px; 将其水平横向向左移动，使之在文档视口中横向居中。


同样的，papa 盒子里要摆放内容，例如我们放一张图片、一行文字：


<div id="papa">
    <img src="图片地址" alt="" />
    <p>本尊花样写真，敬请欣赏！谢谢！</p>
</div>


如此，图片在上面，文字在下面。图片与文字代码对调一下位置，则文字在上面，图片在下面。


这就是文档流——文档自然流淌的位置关系。

前一篇: 二、帖子父盒子的常规属性
下一篇: 四、明晰文档节点概念