CSS布局技巧 ｜ 青训营

常见的CSS布局方式

• 浮动布局
• 定位布局
• 弹性盒子布局
• Grid布局

left浮动布局

脱离浏览器默认的文档流

• left 向左浮动
• right 向右浮动
• none 【默认值】不浮动
• inherit 继承父元素

清除浮动

clear: left; 添加clear: left;

position定位布局

1. 固定定位

.element {
  position: fixed;
  top: 0;
  left: 0;
}

这段代码将元素固定在浏览器窗口的左上角，即使页面滚动，元素也会保持在同一位置。 2. ### 粘性定位

.element {
  position: sticky;
  top: 50px;
}

这段代码将元素设置为粘性定位，当页面滚动超过指定位置（这里是50像素），元素将固定在该位置，直到滚动回到指定位置之前。 3. ### 绝对定位

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这段代码将元素设置为绝对定位，并将其位置相对于其最近的具有定位属性（非静态定位）的父元素或文档进行定位。通过使用top和left属性以及transform属性，可以将元素居中定位。 4. ### 相对定位

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

Gird定位

Grid布局是一种二维网格系统，它可以让开发者将网页的布局划分为行和列，从而更灵活地控制元素的位置和排列。通过使用Grid布局，可以实现复杂的网格结构，使得网页布局更加直观和易于管理。

html
<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}
css
.item {
  background-color: #eaeaea;
  padding: 20px;
}