CSS布局技巧
1. Float布局：
float属性用于定义元素在父元素中的浮动方式。- 浮动元素会脱离正常文档流，并根据
float属性值的设置向左或向右浮动。（会脱离文档流） - 浮动元素会影响其他非浮动元素的位置，使其环绕浮动元素。
2. Position布局：
position属性用于定义元素的定位方式，有四个值可选：static、relative、absolute、fixed。relative：相对定位，元素根据自身在正常文档流中的位置进行定位，可以通过top、left、right、bottom属性来控制元素相对于原始位置的偏移。（不会脱离文档流）absolute：绝对定位，元素根据离它最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档进行定位。（会脱离文档流）fixed：固定定位，元素相对于浏览器视口进行定位，即不随滚动条的滚动而变化。（会脱离文档流）
3. Flex布局：
-
布局的传统解决方案，基于[盒状模型]，依赖
display属性 +position属性 + [float])属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。因此出现了Flex布局 -
弹性盒子布局是一种灵活的布局模型，用于在容器中进行自适应和对齐。
-
弹性盒子由容器和内部项目组成，通过设置容器的属性来控制项目的布局。
-
容器的属性：
display: flex，用于将容器设置为弹性盒子；flex-direction，用于设置项目在主轴上的排列方式；justify-content，用于设置项目在主轴上的对齐方式；align-items，用于设置项目在交叉轴上的对齐方式。 -
项目的属性：
flex-grow，用于设置项目的放大比例；flex-shrink，用于设置项目的缩小比例；flex-basis，用于设置项目的初始长度；order，用于设置项目的排列顺序。
4. Display布局：
在 css 中实现页面布局的主要方法是设定display属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。例如，英文段落显示在一个段落的下面，这是因为它们的样式是display:block。如果在段落中的某个文本周围创建链接，则该链接将与文本的其余部分保持内联，并且不会打断到新行。这是因为<a>元素默认为display:inline。
