布局技术

主要布局技术如下：

浮动（Float）: 最初用于文本环绕图像，但后来被用于布局。通过float属性，元素可以向左或向右移动，直到它的外边缘接触到包含框或另一个浮动元素的边缘。
定位（Positioning）: 包括绝对定位（absolute）、相对定位（relative）、固定定位（fixed）和粘性定位（sticky）。这些属性允许元素相对于其正常位置或其包含元素进行定位。
显示属性（Display）: 如block、inline、inline-block等，控制元素如何显示以及它们如何布局。
弹性盒子布局（Flexbox）: 一种现代的布局模式，使得在各种大小的屏幕上对元素进行灵活排列变得更加简单。通过display: flex属性，可以轻松控制轴线、方向、对齐等。
网格布局（Grid）: CSS网格布局是一个二维的布局系统，允许创建复杂的布局结构，提供行和列的布局控制。通过display: grid启用，并通过网格线、网格区域等进行布局控制。

浮动（Float）

CSS中的float属性是一个用于实现元素的浮动布局的属性。当你对一个元素应用float属性时，它会脱离正常的文档流，并向指定的方向移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘为止。

float属性主要有以下几个值：

left：元素向左浮动。
right：元素向右浮动。
none：默认值，元素不浮动，并会显示在其在文档流中的正常位置。
inherit：继承父元素的float属性。

使用float时通常需要注意以下几点：

浮动元素会影响其周围元素的布局。非浮动元素可能会围绕浮动元素排列。
浮动可能导致父元素高度塌陷，因为浮动元素不再占据正常的文档流空间。这通常通过清除浮动（使用clear属性）来解决。
在现代网页布局中，float用得较少，Flexbox和Grid布局提供了更灵活和强大的布局选项。

定位（Positioning）

静态定位（Static Positioning）:
- 默认方式
相对定位（Relative Positioning）:
- 元素首先按照静态定位放置，然后相对于其正常位置进行偏移。
- 可以使用top, bottom, left, right属性来指定偏移量。
- 元素仍然占据其在文档流中的空间。

绝对定位（Absolute Positioning）:

元素脱离正常文档流，相对于最近的已定位（非static）祖先元素进行定位。不动了
使用top, bottom, left, right属性来指定位置。
会覆盖

<template>
  <div class="container">
    这是一个普通的容器。
    <div class="absolute-box">
      这是一个绝对定位的盒子。
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'AbsolutePositioningDemo'
}
</script>
 
<style>
.container {
  border: 1px solid black;
  padding: 20px;
  width: 300px;
  height: 300px;
}
 
.absolute-box {
  position: absolute;
  top: 50px;
  left: 50px;
  border: 1px solid red;
  padding: 10px;
}
</style>

固定定位（Fixed Positioning）:
- 类似于绝对定位，但是元素是相对于浏览器窗口进行定位的。
- 即使页面滚动，元素也会保持在相同的位置。
- 使用top, bottom, left, right属性来指定位置。
- 元素不占据文档流中的空间。
粘性定位（Sticky Positioning）:
- 是相对定位和固定定位的混合体。
- 元素根据正常文档流定位，但当页面滚动到达某个阈值时（如top设置的值），元素会像固定定位那样固定在页面上。
- 使用top, bottom, left, right属性来指定阈值

显示属性（Display）

none:
- 元素不会被显示，完全从文档流中移除。
- 元素及其子元素都不会渲染，且不占据任何空间。
block:
- 元素会显示为块级元素。
- 可以设置宽度、高度、边距和填充。
inline:
- 元素会显示为内联元素。
- 不能设置宽度和高度。
table, table-row, table-cell等:
- 使元素表现得类似于HTML表格中的<table>, <tr>, <td>等标签。