CSS布局技巧|青训营

通过这段时间在青训营的学习， 我受益良多。其中，CSS布局是我学习中的重要部分，它是前端技术的核心。下面我将就布局技巧方面的学习笔记和实践记录进行分享。

一、浮动布局

浮动布局是最基础的CSS布局方式，主要使用float属性，可以实现元素的左右浮动。：浮动元素的父元素高度会塌陷，因此，我们需要手动清除浮动；浮动元素之间会有在我们平常的开发过程中，浮动布局经常被用来处理一些比较简单的布局需求，如导航条等。 实战中，我们需要注意以下两个问题间隙，我们需要掌握好父元素和浮动元素之间的margin和padding的使用。

<style>
  .parent {
    overflow: auto; /* 清楚浮动 */
  }

  .child {
    float: left; 
    margin-right: 10px;
  }
</style>

<div class="parent">
  <div class="child">Content 1</div>
  <div class="child">Content 2</div>
  <div class="child">Content 3</div>
</div>

其中.parent设置了overflow:auto以清除浮动，使其能自动获取高度。margin-right: 10px;是为了设置元素间距。

二、定位布局

定位布局主要涉及到四个属性：absolute、relative、fixed和sticky。各自应用场景不同。比如，fixed可以应用在需要在页面滚动时，某些元素固定显示的场景，如返回顶部按钮。 在实践中，我们常常会将position和transform配合使用，这样可以减少计算，提高渲染性能。

<style>
  .parent {
    position: relative;
  }

  .child {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>

<div class="parent">
  <div class="child">Content</div>
</div>

这里设置父元素position: relative;，然后子元素设置position: absolute;，可以使得子元素的位置相对于父元素进行定位。

三、弹性盒子布局

弹性盒子（Flexbox）布局是CSS3新增的一种布局方式，其能够自动调整和适配不同设备和屏幕尺寸。所以，当我们处理响应式布局时，弹性盒子布局是个非常好的选择。 实操中，一开始可能会对flex-grow、flex-shrink、flex-basis这些属性感到迷惑，但只需了解其具体含义和效果，就可以轻易掌握。

<style>
  .parent {
    display: flex;
  }

  .child {
    flex: 1; /* 即 flex-grow: 1; flex-shrink: 1; flex-basis: 0; 的简写  */
  }
</style>

<div class="parent">
  <div class="child">Content 1</div>
  <div class="child">Content 2</div>
  <div class="child">Content 3</div>
</div>

此处的.parent设置为display: flex;，使其成为弹性父容器，内部的.child元素即为弹性子项目。flex: 1;则表示所有的子项目都将平均分配剩余空间。

以上就是我在青训营学习中关于CSS布局技巧的一些总结，其中还融入了一些实践经验和心得。在使用这些布局技巧时，代码解释与理解是非常重要的，既可以学习布局知识，也能在实际应用中灵活运用，达到事半功倍的效果。学习编程也同研磨剑一样，唯有不断实践才能够越来越熟练。所以，建议新初学者一定要多练，把理论知识转化为实操技能。