前言

在前端开发中，CSS布局是一个非常关键的部分。良好的布局结构能够使网页呈现出美观、清晰的界面，并且提供更好的用户体验。本篇实践记录将汇总一些常用的CSS布局技巧，并给出它们的应用场景和实操实践。

一、浮动（float）

应用场景： 浮动布局常用于实现多列布局，特别适用于制作响应式的网格系统。
实操实践：

HTML代码

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

CSS代码

.container {
  overflow: hidden;
}

.column {
  float: left;
  width: 33.33%;
}

二、定位（position）

应用场景： 定位布局常用于实现元素的精确定位，可以实现层叠效果或者固定位置布局。
实操实践：

HTML代码

<div class="parent">
  <div class="child">This is a positioned element.</div>
</div>

CSS代码

.parent {
  position: relative;
  height: 200px;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

三、弹性盒子布局（flexbox）

应用场景： 弹性盒子布局是一种方便灵活的布局模式，特别适用于构建可伸缩且自适应的布局。
实操实践：

HTML代码

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

CSS代码

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

.box {
  flex: 1;
}

四、网格布局（grid）

应用场景： 网格布局是一种功能强大的布局模式，可以实现复杂的网格结构和响应式布局。
实操实践：

HTML代码

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

CSS代码

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

.item {
  background-color: #ccc;
  padding: 10px;
}

五、响应式布局（media queries）

应用场景： 响应式布局是一种能够根据设备或浏览器的不同尺寸进行自适应布局的技术，可以提供良好的用户体验。
实操实践：

HTML代码

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

CSS代码

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

.box {
  flex: 1;
}

/* 在屏幕宽度小于600px时，改变布局 */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

六、居中布局

应用场景： 居中布局常用于使元素在容器中水平垂直居中，可以用于页面的标题、图片等。
实操实践：

HTML代码

<div class="container">
  <div class="box">Centered Box</div>
</div>

CSS代码

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

以上CSS布局技巧是前端开发中常用的基础知识，掌握它们可以实现各种复杂的布局效果

总结

本篇实践记录介绍了几种常用的CSS布局技巧，包括浮动、定位、弹性盒子布局、网格布局、响应式布局和居中布局。它们在不同的布局需求下发挥着重要作用，能够帮助开发者实现各种复杂的布局效果。通过实际的代码例子，可以更好地理解和掌握这些布局技巧，从而为前端开发工作提供了有力的支持。

实践记录：CSS布局技巧 | 青训营

前言