CSS Layout#
布局的主要问题是什么？
在一批批元素中，将元素放到适当的位置，最终呈现出所需要的结果。
因此主要问题就是找到每个元素的位置，确定了位置之后，也就达到了 “布局 “的效果。
在一个坐标系内，如何确定多个元素的坐标？
-
相对定位，元素 A 的位置相对于元素 B 的位置进行确定。
-
绝对定位，为元素 A 指定一个坐标，就站在那里了。
-
顺序，按照一定的规则（如从左向右 / 从上到下）一个接一个排布。上一个元素结尾的位置，就是现在的位置。
与 CSS 布局有关的属性有三个，float,position以及 display。
float#
float 的作用最初只用于在成块的文本内浮动图像，但在很长一段时间内却起到了多列布局的功能。
在 flex / grid 等布局功能出现之后，float 也可以卸下本不该属于它的重担，只需负责浮动特定元素。
position#
-
position:static，默认情况下一个元素的位置就紧随上一个元素，进行换行 / 处于尾部。 -
position:relative，元素仍然占用文档流，其宽度由子元素撑开。 -
position:absolute, 元素不再占用当前文档流，不会对其他元素产生影响，只会基于文档边界（body默认行为）进行定位。 -
但是通过改变其祖先元素的定位方式为
position:relative，会基于祖先元素而非body进行绝对定位。（也称改变定位上下文） -
position:fixed, 元素不再占用当前文档流，不会对其他元素产生影响，只会基于可视窗口（默认行为）进行定位。 -
但是当元素祖先的
transform、perspective、filter或backdrop-filter属性非none时，会基于该祖先进行定位。
![[img/image.png]]
position:sticky, 设定一个界限，在界限内，采用相对定位，当超过界限前 (比如超出 viewport)，转换定位方式转换为 fixed。
display#
同时有两种功能。
-
对父代或同代，声明是块元素还是内联元素，以表示自己如何参与父代的排列。
-
对子代，声明所需要遵循的布局方式。在自己内部，同级元素如何排布。
对于声明的子代布局。主要有三种，流式布局 (默认)，弹性布局，网格布局。
弹性布局#
![[../excalidraw/界面布局 flex.excalidraw]]
Q1：子元素在内部的排布方式？
按行 / 按列顺序排布。flex-direction。
为方便 / 统一起见。因为需要描述xy轴，但又是基于一维方向，因此，定义出main axis和cross axis
Q2：在父元素剩余空间大于子元素所需空间时，子元素如何对齐？
-
在主轴方向上，
justify-content -
在交叉轴方向上，
align-items -
在交叉轴方向上多行 / 列之间，
align-content
Q3：在主轴上子元素超出父元素的承受能力的时候，需要考虑的问题？
-
超出主轴大小，
flex-wrap -
适当缩放大小，
flex-shrink和flex-grow -
缩放所参考的基准，
flex-basis
Q4：其他增强部分
- 在不改变原有元素顺序的情况下，改变现实顺序，
order
网格布局#
![[../excalidraw/界面布局 grid.excalidraw]]
Q1：子元素在内部的排布方式？
预先定义好行列数构建出网格，随后将子元素放入单元格中。
Q2：如何定义行列的语法？
-
行方向上
grid-template-row -
列方向上
grid-template-column
Q3：如何将元素按指定的方式放在某个 / 某几个单元格内？
-
行方向上
grid-row -
列方向上
grid-column
Q4：如何调整单元格行列相对于父元素的排布？
-
行方向上
justify-content -
列方向上
align-content
Q5：如何调整元素在一个 / 多个单元格内，相对于父元素的排布？
-
（整体）行方向上
justify-items -
（整体）列方向上
align-items -
（单元素调整） 行方向上
justify-self -
（单元素调整） 列方向上
align-self
Q5：功能性增强部分？
-
grid-template-area，为多个网格区域进行命名，从而可以通过grid-area快速指定元素所处的位置，并提升语义性。 -
gap，为单元格增加间距。 -
grid-auto-column与grid-auto-row，在指定的grid-row和grid-column超出所定义的template时新增隐式网格部分。 -
相关度量单位
fr，通过该单位行列去按比例定义剩余空间的分配方式。