参考文章：
https://blog.csdn.net/qq_38473254/article/details/124774497
https://blog.csdn.net/weixin_48051526/article/details/140731821
https://blog.csdn.net/qq_69183322/article/details/136102095
https://zhuanlan.zhihu.com/p/29070363
https://zhuanlan.zhihu.com/p/161822219

position定位布局

属性值	作用
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 left 位置添加 20 像素。`子绝父相`
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值，详情查看 CSS initial 关键字。

static(默认值)

默认值，静态定位，即没有任何定位，一般情况下不需要主动设置

relative

元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。

absolute

元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)

fixed

元素框不再占有文档流位置，并且相对于视窗进行定位

sticky

黏性定位，相当于relative和fixed定位的结合。元素占有自己原来的位置，但设置完left、top、right、bottom任一之后，随着鼠标的滚动会表现出fixed的效果。必须搭配一个位置属性（left、top、right、bottom），否则与relative定位效果一致。

flex弹性布局

父属性

CSS Flexbox 属性	描述
flex-direction	主轴的方向。
flex-wrap	超出父容器子容器的排列样式。
flex-flow	`flex-direction` 属性和 `flex-wrap` 属性的简写形式。
justify-content	子容器在主轴的排列方向。
align-items	子容器在交叉轴的排列方向。
align-content	多根轴线的对齐方式。

详细讲解可看这篇文章：[flex布局详解](Flex布局（上万字）超详细讲解这篇就够了-CSDN博客)

在 flex 中，最核心的概念就是容器和轴，所有的属性都是围绕容器和轴设置的。其中，容器分为父容器和子容器。轴分为主轴和交叉轴（主轴默认为水平方向，方向向右，交叉轴为主轴顺时针旋转 90°）。

在使用 flex 的元素中，默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）主轴开始的位置称为 main start，主轴结束的位置称为 main end。同理，交叉轴开始的位置称为 cross start，交叉轴结束的位置称为 cross end。在使用 flex 的子元素中，占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

flex-direction

flex-direction 属性决定主轴的方向（主轴的方向不一定是水平的，这个属性就是设置主轴的方向，主轴默认是水平方向，从左至右，如果主轴方向设置完毕，那么交叉轴就不需要设置，交叉轴永远是主轴顺时针旋转 90°）。

flex-direction 属性值	描述
row	这是默认值。当设置为row时，主轴的方向为水平，子元素从左到右排列。
row-reverse	当设置为row-reverse时，主轴的方向仍然是水平，但子元素从右到左排列，即反向水平排列。
column	当设置为column时，主轴的方向变为垂直，子元素从上到下排列。
column-reverse	当设置为column-reverse时，主轴的方向为垂直，但子元素从下到上排列，即反向垂直排列。

flex-wrap

flex-wrap 属性的参数。**flex-wrap** 是 CSS 中的一个属性，用于控制弹性盒子模型中的子元素是否应该换行。它有三个可能的值：

flex-wrap 属性值	描述
nowrap	默认值。子元素不会换行，即使容器的空间不足以容纳它们。这可能会导致子元素溢出容器。
wrap	如果容器的空间不足以容纳所有子元素，那么子元素会移到下一行。这意味着子元素会在需要时换行。
wrap-reverse	子元素的排列顺序与 `wrap` 相反。在 `wrap-reverse` 中，子元素会从容器的底部开始向上换行。

flex-flow

flex-flow 是 CSS 中的一个简写属性，用于设置一个弹性容器（flex container）的主轴方向（**flex-direction）和换行方式（flex-wrap**）。默认值为row nowrap。

justify-content

定义了项目在主轴上的对齐方式。

属性值	属性介绍
flex-start	从头部排列
flex-end	从尾部排列
center	居中排列
space-around	平分剩余空间
space-between	两边贴边，剩余平分

align-items

定义项目在交叉轴上如何对齐。

属性值	属性介绍
stretch	默认值。如果项目未设置高度或设为 auto，将占满整个容器的高度
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	居中
baseline	以项目的第一行文字的基线对齐

align-content

align-content 是 CSS Flexbox 布局中的一个属性，它用于定义在交叉轴（cross axis）上如何对齐 flex 容器的行（如果 flex 容器是多行的）。这个属性只对设置了 display: flex; 并且具有多行子项的容器有效。当容器只有一行子项时，align-content 属性不会产生任何效果。

属性值	属性介绍
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	子项之间的间隔平均分布，两端对齐
space-around	每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍

float浮动

css浮动一般用作设置页面的左右布局，浮动就是让盒子或者元素脱离正常的标准流控制，元素本来在一个位置，加一个浮动它就会像云一样飘浮起来。进而移动到指定的位置。需要记住的是，如果元素或者盒子添加了浮动就不再占有本来的位置了。

属性值	属性介绍
left	盒子左浮动
right	盒子右浮动
none	盒子不浮动
inherit	继承父元素的浮动属性