布局是元素与其他元素之间的位置关系
布局的目的就是确定元素在屏幕上的位置。 确定位置需要2个东西。
- 参考位置
- 和参考位置之间的关系。
例如： 笛卡尔坐标系
- 参考位置：原点
- 和参考位置之间的关系：坐标(x,y)
参考位置和位置关系举例
-
position: relative
- 参考位置：元素的static位置
- 位置关系:相对参考位置的left,right
-
position: fixed
- 参考位置：窗口的原点
- 位置关系:相对参考位置的left,right
-
position: absolute
- 参考位置：最近的“positioned”祖先元素
- 位置关系:相对参考位置的left,right
-
float中的浮动对象
- 参考位置：父容器
- 位置关系:父容器的侧边
-
float中的环绕对象
- 参考位置：父容器和父容器中的浮动对象
- 位置关系:在剩余的空间中排布
布局的难点来自于参考位置和关系的变化
在2维平面上，如果都采用笛卡尔坐标系来定位，布局是比较简单的。然而很多时候，都不会只采用(x,y,w,h)来定位元素。原因有几个：
-
阅读需要流布局。
阅读时候的视觉动线是一维的，典型的情况是文字。文字是像排队一样，一个排在一个后面，而不是单独为每个文字指定坐标。
-
浏览器大小的变化
在很久很久以前，网页布局的一种方式是把页面大小直接设为800 * 600之类的绝对大小。现在已经很少用了。网页得考虑各种窗口尺寸的情况。
display与维度
早期CSS中，display属性主要有2个常用值。分别是block和inline，再加上none。分别对应了3个维度。
- 0维：none
- 1维：inline
- 2维：block
这也顺便解释了display:none和visibility: hidden的区别。none是在空间中占0维，就是不占用屏幕空间。另一个是占了屏幕空间，但是隐身了。
二维布局
二维布局常用的是relative，fixed，absolute，找一个参考点，在参考点上加上x,y,w,h来定位
一维布局(流布局)
流布局可以看作是排队。流布局的对象不关心自己的xy坐标，只关心前一个元素在哪，以及排队的下一个空位在哪。典型的流布局是inline
二维布局与流布局的结合
从阅读习惯来说，人有视觉动线。从空间上来说，屏幕是个二维空间。因此，很多排版方案，既是1维的，又是2维的。说是1维的，是有一个1维的主要方向，说是2维的，是在这个1维方向上，排布的是2维元素。这个2维元素里，又可以出现1维方向。
从历史的演变看二维布局与流布局的结合
在css的历史上，逐渐出现了以下方案:
- inline-block
- flex
- grid
- inline-block可以看作是在1维的动线上，嵌入了2维的block
-
flex可以看作是嵌套了2层的inline-block
主轴:
交叉轴:
合起来：
-
grid
如果说flex是在1维线上嵌2维，grid则是先排布2维格子。再在行或者列方向用1维布局做调整。
参考：
【非设计师也该学的排版知识：视觉动线篇 - oooooohmygosh】 www.bilibili.com/video/BV1FZ…
