从文档流角度理解浏览器页面渲染引擎对元素定位的解析

文档流：将窗体自上而下分成一行一行，并在每行中按从左至右的挨次排放元素,即为文档流。

我们在排列元素时，遵循"流式结构"，即元素遵循从上向下，从左向右堆叠的规则，所以我们在排列元素时如果每行从左往右的元素的总宽度大于窗口的宽度时，就会默认换行。

有三种状况将使得元素离开文档流而存在,分别是浮动、绝对定位、固定定位。

浮动时，离开文档流后的元素，不占用文档流的空间，不会被文档流中的元素发现，离开文档流元素后面的还在文档流上元素会自动上来填补位置接上文档流。此时，离开文档流的元素如同浮在文档流（平面）的上层，而我们正常观看的效果是俯视图的效果，其实二者如同是分离的，不在同一平面。看一段代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box1{width:100px;height:100px;background: purple;margin-top: 100px;float:left;}.box2{width:100px;height:100px;background:blue;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div></body>
</html>

　　效果图如下：

purple色块前面的空隙被文档流中蓝色块填补上了。

再来看看这部分代码:

  <style>.box1{width:100px;height:100px;background: purple;float:left;}.box2{width:100px;height:100px;background:blue;}</style>

　　这里我去掉了浮动元素的margin内容，效果图如下：

这里，发现蓝色块不见了，其实它只是在紫色块的下方，俯视角看下去好像不见了，我将蓝色块的长宽变大些就看的很清楚了：

到这里，就验证得很清楚了。

但是这里需要注意一点的是（这一点我只是知道，我也不清楚为何会这样，如果你知道，希望不吝赐教），举个例子，看代码：

 <style>.box1{width:100px;height:100px;background: purple;float:left;}.box2{width:100px;height:100px;margin-top: 50px;background:blue;}

　　这里文档流上的蓝色块有个上边距50px的属性值，按道理会呈现紫色块会覆盖蓝色块一般面积，但实际效果图如下:

紫色块依然覆盖蓝色块，并且紫色块与蓝色块一起实现上边距50px;这里的效果是蓝色块（以自身块面积，不包括边距）依然填补了紫色块在文档流中的空隙，并且蓝色块的边距属性也对浮动的紫色块有效果，使紫色块产生了边距。

此外，要说的一点是浮动的元素之间也遵循流式结构，也遵循margin与paddng的位置调整。

说到这里再理解绝对定位与相对定位，就容易的多，绝对定位脱离文档流，它可以实现定位位置覆盖在其他元素空间之上（可以任意定位）,相对定位产生时有移动的坐标基点（左上顶点），其依靠top,left,bottom,right移动的距离空间不会消失，会一直存在，占用文档流的空间。固定定位脱离文档流，以窗口为基准参照。

转载于:https://www.cnblogs.com/zhu-xingyu/p/5227263.html

从文档流角度理解浏览器页面渲染引擎对元素定位的解析相关推荐

html 浮动脱离文档流,CSS标准文档流与脱离文档流
标准文档流文档流:指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 标准流的微观现象: 空白折叠现象: 在 ...
什么是脱离文档流？什么是文档流？
浏览器默认的排版方式就是文档流(或者叫标准流)排版方式.脱离文档流就是不按照文档流的排版方式. 文档流的排版方式是:块级元素垂直排布,行内元素和行内块级水平排布.不脱离就是按照这种方式排版,从左到右, ...
css无效 https_【CSS非全解02】CSS基础-文档流
基本概念文档流 mdn 块.内联.内联块? margin合并两种盒模型文档流 Normal Flow 流式布局 mdn 文档流动方向从左到右:"https://developer.m ...
HTML元素脱离文档流的三种方法
一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...
html 浮动脱离文档流,脱离文档流（正常流-文档流）
一.文档流定义将窗体自上而下分成一行一行, 块级元素从上至下. 行内元素在每行中按从左至右的挨次排放元素,即为文档流. 二.行内元素.块级元素.行内块级元素 1.行内元素 span.em.i,以及有 ...
脱离文档流的方法CSS浮动产生的负面影响及解决办法
https://blog.csdn.net/theLostLamb/article/details/79581984 一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素, ...
文档流，浮动，定位的区别和处理
1.文档流 - 所有的元素默认情况下都是在文档流中存在的 - 文档流是网页的最底层 - 元素在文档流中的特点: - 块元素 1.默认宽度 ...
HTML05——行内块级元素_文档流_font属性_盒子模型_练习
目录行内块级元素文档流 font属性文本段落文字属性盒子模型概念和属性常见问题块元素和行元素的相互转换 display属性 overflow属性边框.宽度与高度浮动float 练习 ...
HTML脱离文档流的三种方法
一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...

从文档流角度理解浏览器页面渲染引擎对元素定位的解析

从文档流角度理解浏览器页面渲染引擎对元素定位的解析相关推荐

最新文章

热门文章