浏览器是如何确定每一个元素的位置

这节了解：浏览器是如何确定每一个元素的位置

涉及到确定元素位置，那就聊到了我们的排版了，最常见的是正常流排版

正常流排版：正常流是唯一一个文字和盒混排的排版方式，在正常流的文字排版中，多数元素被当作长方形盒来排版，而只有 display 为 inline 的元素，是被拆成文本来排版的。

正常流中的盒：(元素被定义为占据长方形的区域，还允许边框、边距和留白，这个就是所谓的盒模型)

在正常流中，display 不为 inline 的元素或者伪元素，会以盒的形式跟文字一起排版。多数 display 属性都可以分成两部分：内部的排版和是否 inline，带有 inline- 前缀的盒，被称作行内级盒。

块级盒比较简单，它总是单独占据一整行，计算出交叉轴方向的高度即可

绝对定位元素:

position 属性为 absolute 的元素，我们需要根据它的包含块来确定位置，这是完全跟正常流无关的一种独立排版模式，逐层找到其父级的 position 非 static 元素即可。

浮动元素排版:

float 元素非常特别，浏览器对 float 的处理是先排入正常流，再移动到排版宽度的最左 / 最右（这里实际上是主轴的最前和最后）。

其它的排版:

flex排版（可参考网络教程）

我比较常用的布局是Flex布局，可以轻易几行代码就能达到效果，你们呢？比较常用的布局是什么？

此文章为4月Day9学习笔记，内容来源于极客时间《重学前端》