css 定位和布局
定位
CSS中的position属性用于指定一个元素在文档中的定位方式。它可以接受四个值，分别是：
| 属性值 | 描述 |
|---|---|
| static | 默认值。没有定位，元素出现在正常的文件流中。 |
| relative | 相对定位，相对于元素原位置进行偏移，其他元素不会占空。 |
| absolute | 绝对定位，脱离文件流，相对于包含元素进行偏移。 |
| fixed | 固定定位，类似absolute，包含元素为浏览器，相对于浏览器偏移，页面滚动时固定在目标位置 |
| sticky | 粘贴定位，relative和fixed的结合体，相对于原位置偏移，页面滚动时固定在目标位置。 |
父元素相对定位
子元素绝对定位
口诀 ：父相对子绝对
- static：元素的位置不受影响，即默认的定位方式。
- relative：元素相对于它原来文档流的位置进行定位，可以使用top、right、bottom、left等属性对元素进行偏移。同时原来的文档流位置仍然保留。
relative不会脱离文档流，他是在基于文档流的基础上做一些调整。使用relative可以保证元素位置大体基于文档流，我们做微小调整即可。所以父元素通常使用relative，因为父元素是提供大概的位置和框架的，不需要很灵活，所以我们一搬在父元素中使用相对定位，相对于文档流原来的位置定位
- absolute：元素相对于最近的非static父元素进行定位，如果没有找到非static父元素，则相对于文档进行定位，可以使用top、right、bottom、left等属性对元素进行偏移。
1. absolute会脱离文档流，为什么子元素通常使用绝对定位呢？因为业务的需要，子元素需要有更加灵活的控制，控制他在父元素中的位置，所以我们可以通过绝对定位，精确的控制子元素在父元素中的位置
2. 如果子元素找不到非static父元素，他就是基于文档流的绝对位置定位，也就是左上角，这也是他为什么叫做绝对定位的原因为他要么是基于整个文档的左上角来定位，要么是基于父元素的左上角定位的
- fixed：元素相对于浏览器窗口进行定位，即在页面滚动时位置不会改变，可以使用top、right、bottom、left等属性对元素进行偏移。
使用position属性可以使开发者自由控制元素在页面中的位置，常见的应用场景包括实现固定在页面某个位置的元素、实现弹出式窗口等。需要注意的是，使用position属性时应注意其会改变元素在文档流中的位置，可能会影响其他元素的布局和位置。
定位总结
定位表示元素相对于什么东西来定位，以便让我们使用top、right、bottom、left等属性对元素的位置进行偏移。他的本质是一种位置的微调。
文档流的绝对位置
文档流的绝对位置是指元素在文档中的精确位置，它是基于文档根元素（HTML元素）计算的。文档根元素是文档中所有元素的祖先元素，它的左上角位置被视为文档流的起点，即文档流的绝对位置为（0,0）。
当一个元素使用position: absolute进行定位时，它的位置是相对于文档流的绝对位置而言的。具体来说，元素的定位是基于元素自身的左上角进行计算的，而这个左上角相对于文档流的绝对位置的偏移量就是通过top、right、bottom和left属性进行指定的。这意味着，使用position: absolute定位方式的元素可以脱离文档流，而且它们的位置不受其他元素的影响，因为它们的位置是基于文档流的绝对位置进行计算的。
需要注意的是，当一个元素的祖先元素使用transform属性进行变换时，这个元素的定位也会受到影响，因为transform属性会改变元素的坐标系。此时，元素的定位会相对于发生了变换后的坐标系进行计算。
|值 |语义|
| ---- | ---- |
|static |「静态」定位|
|relative |「相对」定位|
|absolute |「绝对」定位
|fixed |「固定」定位|
子元素用绝对定位
父元素用相对定位
布局方式
CSS中的display属性用于指定一个元素应该以何种方式显示。它可以接受多个值，每个值都代表一种显示方式，以下是一些常见的display属性值：
block：将元素显示为块级元素，即在父元素中占据一整行的元素，会在前后添加换行符。
inline：将元素显示为内联元素，即在父元素中与其他元素共享一行的元素，不会添加换行符。
inline-block：将元素显示为内联块元素，即在父元素中与其他元素共享一行的元素，但是可以设置宽度、高度和内外边距等样式。
none：将元素隐藏，不占用空间。
table：将元素显示为表格。
table-row：将元素显示为表格行。
table-cell：将元素显示为表格单元格。
flex：将元素显示为弹性盒子。
grid：将元素显示为网格容器。
这些值可以根据需要进行组合，例如使用flex和inline-flex属性可以使元素具有弹性盒子的属性，并且可以作为内联元素显示。使用display属性可以使开发者根据需要自由控制元素的布局和显示方式。
浮动
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。现在有了flex和grid布局，过去使用float实现的效果现在可以用flex和grid实现，而且可以实现响应式效果，代码也更简单。
浮动也会脱离文档流
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
清除浮动
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
准确地说，并不是清除浮动，而是清除浮动后造成的影响
清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
什么时候用清除浮动呢？
父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了。
总结
CSS 布局属性和定位属性是两种不同的属性，用于实现页面布局和定位元素的方式。它们的主要区别在于其应用的场景和影响范围。
CSS 布局属性：
布局模型： 布局属性用于定义元素在页面中的整体布局模型。例如，Flexbox 和 Grid Layout 是两种强大的布局模型，它们提供了灵活的方式来组织和排列元素。
影响范围： 布局属性通常影响元素及其子元素，以及它们之间的关系。这些属性改变了元素在页面上的排列方式、空间分配以及对齐等布局特性。
例子：
display: flex;：使用 Flexbox 布局。display: grid;：使用 Grid Layout 布局。float：在早期的布局中，通过浮动来实现元素的排列。position: relative;：相对定位，影响元素在正常文档流中的位置。
定位属性：
元素位置： 定位属性用于直接控制元素的位置，通常配合
top、right、bottom、left这些属性来实现精确的位置控制。它更侧重于单个元素的定位，而不是整体布局。影响范围： 定位属性通常影响单个元素，使其脱离正常文档流，可以在页面中的特定位置进行定位。
例子：
position: absolute;：绝对定位，相对于最近的已定位祖先元素。position: fixed;：固定定位，相对于视口（浏览器窗口）进行定位。position: relative;：相对定位，相对于元素在正常文档流中的位置进行定位。position: sticky;：粘性定位，元素根据用户滚动的位置在某个阈值内进行定位。
总体而言，CSS 布局属性用于定义整体页面结构和元素之间的关系，而定位属性用于调整单个元素的具体位置。在实际开发中，它们常常结合使用，以实现复杂的页面布局和定位需求。