CSS布局技巧

本篇笔记为实践笔记，汇总CSS布局技巧，如浮动、定位、弹性盒子布局等，以及写出它们的应用场景和实操实践。

在网页开发中，合理的CSS布局是至关重要的。下面我们将介绍一些常用的CSS布局技巧，并给出它们的应用场景和实操实践。

1. 浮动布局

浮动布局是一种传统的网页布局技巧，通过使用 CSS 的 float 属性将元素浮动到指定的位置。浮动元素会脱离正常文档流，并根据指定的方向（左浮动或右浮动）移动到其父元素或其他浮动元素的旁边。

浮动布局通常适用于创建多列布局，其中多个元素按照水平方向排列。这些元素可以是块级元素（如 <div>）或内联元素（如 <span>）。通过对元素应用不同的浮动属性，可以使它们在水平方向上并排显示。

浮动布局的基本原则如下：

设置浮动：在需要浮动的元素上应用 float 属性，可以将其浮动到左侧或右侧。
控制宽度：为浮动元素设置合适的宽度，以确保它们在一行中适应父容器的宽度，并避免覆盖其他元素。
处理浮动元素之间的空隙：浮动元素之间可能存在空隙，可以通过设置父容器的 overflow: hidden; 属性或使用 clear 属性来解决。

应用场景

布局中的左右列分栏效果。
创建文字环绕图片的效果。
实现横向导航栏布局。

实操实践

<style>
  /* 导航栏样式 */
  .navbar {
    background-color: #f2f2f2;
    height: 50px;
    overflow: hidden;
    padding: 0 20px;
  }

  /* 导航链接样式 */
  .navbar a {
    float: left;
    display: block;
    color: #333;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-size: 18px;
  }

  /* 清除浮动 */
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
</style>

<div class="navbar clearfix">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">服务</a>
  <a href="#">关于我们</a>
  <a href="#">联系我们</a>
</div>

效果展示：

以上代码定义了一个具有横向排列的导航栏。.navbar类设置了导航栏的背景颜色、高度和内边距。.navbar a定义了导航链接的样式，包括颜色、居中对齐、内边距等。

为了清除浮动，我们添加了一个.clearfix类，并使用::after伪元素清除浮动。这样可以使父容器正确包裹浮动元素，防止布局出现问题。

你可以根据需求自定义导航栏的样式和链接内容，以上代码仅作为示例参考。

2. 弹性盒子布局

弹性盒子布局（Flexbox）是一种现代的网页布局技术，通过使用 CSS 的 display: flex 和一系列相关属性，可以创建灵活的布局方式。它提供了一种简单且强大的方法来排列、对齐和分配元素的空间。

弹性盒子布局的关键属性有以下几个：

display: flex：将一个容器元素设置为弹性盒子容器。这会使容器内的所有直接子元素成为弹性盒子项，并根据弹性盒子的规则进行布局。
flex-direction：控制弹性盒子项的排列方向。默认值是 row，水平方向从左到右。其他可选值包括 column（垂直方向从上到下）、row-reverse（水平方向从右到左）和 column-reverse（垂直方向从下到上）。
justify-content：控制弹性盒子项在主轴上的对齐方式。它决定了空白空间的分配方式。常见的值包括 flex-start（对齐到起始位置）、flex-end（对齐到结束位置）、center（居中对齐）、space-between（平均分配空白空间）和 space-around（每个项周围有相等的空白空间）。

应用场景

创建水平或垂直居中的元素。
实现弹性布局，自动适应不同屏幕尺寸。
排列一行或一列的元素。

实操实践

<style>
 .container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 200px;
  background-color: #ccc;
  padding: 10px;
  margin: 10px;
}

</style>

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

当宽度足够多时候，可以并排展示：

当容器宽度不足时，子元素会自动换行显示，并根据可用空间等比例调整宽度。比如如下图就模拟了再手机上进行浏览的页面，三个item进行并排显示。