CSS3 布局与定位

2. 布局与定位

2.1 布局

CSS3 提供了几种新的布局模式，它们能帮助我们创建复杂的网页布局。

流式布局：这是最基础的布局方式，元素按照 HTML 文档中的顺序从上到下、从左到右流动。

固定布局：元素的宽度和位置是固定的，不会随着浏览器窗口的大小变化而变化。通常使用 px 来指定宽度和高度。

弹性布局 (Flexbox)：
Flexbox 是一种一维布局模型，主要用于处理行或列的布局问题。它使得在容器中对齐和分配空间变得更加简单和高效。

基础示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  background: lightblue;
  padding: 10px;
  margin: 5px;
}

解释：.container 使用了 display: flex，使得 .item 元素在容器中水平排列，并且使用 justify-content: space-between 分配它们之间的空间。

网格布局 (Grid)：
Grid 是一种二维布局模型，可以处理行和列。它允许创建复杂的布局，并且支持对齐、重排和响应式设计。

基础示例：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grid-item {
  background: lightcoral;
  padding: 20px;
}

解释：.grid-container 使用了 display: grid，并定义了两个相等的列。grid-template-columns: repeat(2, 1fr) 创建了两列，gap: 10px 设置了网格项之间的间距。

2.2 定位

定位属性用于控制元素的具体位置。CSS3 提供了几种不同的定位方式。

静态定位 (Static)：这是默认的定位方式。元素按照正常的文档流进行排列，不受定位属性的影响。

相对定位 (Relative)：相对定位允许元素相对于其原始位置进行偏移。

示例代码：

.relative-box {
  position: relative;
  top: 20px;
  left: 10px;
}

解释：.relative-box 元素相对于其正常位置向下偏移 20px，向右偏移 10px。

绝对定位 (Absolute)：绝对定位使元素相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。

示例代码：

.absolute-box {
  position: absolute;
  top: 50px;
  right: 20px;
}

解释：.absolute-box 元素将被定位到其最近已定位祖先元素的顶部 50px 和右侧 20px 的位置。如果没有已定位的祖先元素，则相对于视口。

固定定位 (Fixed)：固定定位使元素相对于视口进行定位。即使页面滚动，元素的位置也不会改变。

示例代码：

.fixed-box {
  position: fixed;
  bottom: 0;
  right: 0;
}

解释：.fixed-box 元素将固定在视口的右下角，无论页面滚动到哪里。

粘性定位 (Sticky)：粘性定位结合了相对定位和固定定位。元素在滚动到指定位置之前会保持相对定位，滚动到达指定位置后将变为固定定位。

示例代码：

.sticky-box {
  position: sticky;
  top: 0;
}

解释：.sticky-box 元素会在滚动到视口的顶部时保持固定，直到它所在的容器滚出视口为止。

---