HTML中的布局方式之文档流

HTML中的文档流

1：文档流
在HTML文档中，存在着自己的布局方式，称之为文档流。为什么称之为流呢，因为它的布局方式就像流水一样，简称为流。
那么，HTML中的文档流到底是怎么样的呢？
它是按照从左到右，从上到下进行排列的。这个我们就要结合块元素，行内元素，行内块元素来解释了。
首先是块元素，例如div，如果HTML中有两个div，无论你给div设置多高多宽，这两个div是上下单独占一行的，其余的空白部分被外边距撑满。如图：
如上图所示，无论div元素大小多大，都会单独占一行，按照文档流的方式，从上往下排列，右侧黄色的部分就是撑满的外边距。

块元素是这样，同样行内元素和行内块元素也是这样，因为行内元素和行内块是不独占一行的，所以，他们会从左到右依次排列，如下图所示：
我们可以看到，行内元素会依次排列，如果他们的总长度大于他们父元素的总长度，就会自动换行，如下图所示：

这里的父元素就是body，宽度就等于页面的宽度，当他们的长度大于父元素的长度时，就会自动换行。
下面是行内元素和行内块元素在同一行的情况：

这大体就是HTML文档流的介绍。

在布局方式中存在着一些元素的定位方式来提高页面的多样性，美观。

定位（position）

一、静态定位（static）
static：静态位置属性
注意：元素没有脱离文档流，为默认值。

二、相对定位（relative）
relative为相对定位，顾名思义，设置相对定位给后relative，元素的上下左右移动是相对于自己进行移动的，但是并不会是元素脱离文档流，不会破坏文档流，移动后，原来的位置不被占用。
注意：自身不脱离文档流，定位后原来的位置不会被其他元素所占据。

top 目标元素距离视图窗口顶部 如果小于0 则 往上走
bottom 目标元素距离视图窗口底部 如果小于0 则 往下走
left 目标元素距离视图窗口左边 如果小于0 则 往左走
right 目标元素距离视图窗口右边 如果小于0 则 往右走

三、绝对定位（absolute）
absolute，绝对定位。给元素设置绝对定位后，该元素就脱离的文档流，并且破坏了流式布局。它使元素相对于它的设置了相对定位的父元素进行移动，一般给他的父元素设置为相对定位。
注意：定位后元素脱离文档流，位置被其他元素所占据，元素大小有默认百分之百变为内容大小（默认无外边距）

top 目标元素距离视图窗口顶部 如果小于0 则 往上走
bottom 目标元素距离视图窗口底部 如果小于0 则 往下走
left 目标元素距离视图窗口左边 如果小于0 则 往左走
right 目标元素距离视图窗口右边 如果小于0 则 往右走

三、固定定位（fixed）
fixed。固定定位。顾名思义，设置了固定定位的元素，固定在页面的某个位置不动，同时它使元素脱离了文档流，它相对于页面进行移动和固定。
注意：元素自身脱离文档流，原来的位置被其他元素所占据，元素有原来默认宽度百分之百；变为内容大小；尽可量小。

top 目标元素距离视图窗口顶部 如果小于0 则 往上走
bottom 目标元素距离视图窗口底部 如果小于0 则 往下走
left 目标元素距离视图窗口左边 如果小于0 则 往左走
right 目标元素距离视图窗口右边 如果小于0 则 往右走

以上就是HTML中文档流和定位的简单介绍啦~