前言
HTML 是网页内容创建设计的大佬，页面内容的绘制要遵循他的规则和顺序，这些规则定义了元素如何在页面上布局和显示。今天我们主要走进文档流的世界，揭开文档流魔术师的奥秘。
网页结构和页面绘制
- 网页结构：HTML文档定义了网页的基本结构和内容
- 页面绘制：浏览器按照文档流和CSS样式规则，将HTML元素绘制到页面上
文档流绘制
- 当浏览器渲染页面时，他会按照文档流的顺序依次绘制元素。
- 首先是块级元素，从上到下排列，通常占整行宽度，例如
<div>、<p>等 - 其次是行内元素，他们在同一行内从左到右排列，一直到填满一行再换行，例如
<span>``<a>等
盒子模型与大小计算
- 每个HTML元素都可以看作一个盒子，盒子由内容content 、内边距padding 边框border和外边距margin 组成
- 盒子大小的精确计算为：内容大小（width*height）+内边距padding+边框border
- 盒子的位置在文档流中的默认位置是左上角，通过添加外边距margin可以调整与其他元素的距离
Position 属性与原理
Relative 相对定位
- 相对默认位置：元素相对于它在正常文档流中的位置进行定位。
- 调整位置：用 top、bottom、left、right来调整其相对于初始位置的位置
- 占位不变：虽然元素位置被调整，但他在文档流中的占位仍然保持不变。
Absolute 绝对定位
-
离开文档流：元素从文档流中移除，不再占据原本的空间
-
定位参考：元素相对于最近的祖先元素（该祖先元素具有定位属性）进行定位
-
无定位祖先：如果没有找到具有定位属性的祖先元素，则元素相对于文档的元素进行定位。
