【前端老赵的CSS简明教程】7-1 CSS常用的布局方式有哪些

大家好，欢迎来到本节课，我是你们的前端老赵。今天我们要讲的是CSS常用的布局方式有哪些，这是前端开发中非常重要的一个知识点，相信大家都会从中受益匪浅。那么，让我们开始吧！

在网页设计和开发中，布局是非常重要的。不同的布局方式可以达到不同的效果，使网页设计更加美观、易读和易用。CSS中提供了多种布局方式，我们在开发过程中需要根据具体情况选择不同的布局方式。下面我们就来了解一下CSS常用的布局方式有哪些。

1. 流式布局

流式布局是指网页内容按照一定的比例随着浏览器窗口大小的变化而自适应调整大小和位置。这种布局方式能够在不同的设备和屏幕上提供良好的可读性和可用性。

2. 浮动布局

浮动布局是CSS中通过浮动元素来实现页面布局的一种方式。一般来说，浮动布局的主要应用场景是实现多列布局，同时也可以实现其他的布局效果，比如文字环绕图片等。

3. 定位布局

定位布局是指通过CSS的position属性来设置元素的定位方式。这种布局方式可以精确地控制元素的位置和大小，并且可以在网页中创建各种有趣的效果。

4. 弹性布局

弹性布局是指通过CSS的flexbox布局来设置元素的位置和大小。这种布局方式可以让网页内容在不同的屏幕上自适应调整大小和位置，并且能够实现更加复杂的布局效果。

5. 网格布局

网格布局是指通过CSS的grid布局来设置元素的位置和大小。这种布局方式可以让网页内容以网格的形式进行布局，非常适合于复杂的网页设计。

下面我们通过具体的讲解来带大家学习这几种布局：

流式布局：

让我们先回顾一下CSS盒模型，它定义了一个网页元素的内容区域、内边距、边框和外边距四个部分。流式布局中的宽度百分比是相对于包含它的父元素而言的，所以我们需要先了解一下父元素的宽度。当父元素的宽度改变时，子元素的宽度也随之变化，从而达到自适应的效果。

接下来，我将为大家演示一下流式布局的实现方法。

HTML结构如下：

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS样式如下：

<style>
  .wrapper {
    width: 80%;
    margin: 0 auto;
    font-size: 0; /* 设置字体大小为 0 */
  }

  .box {
    width: 30%;
    height: 100px;
    margin: 0 1.666%;
    background-color: #ccc;
    display: inline-block; /* 将 display 属性设置为 inline-block */
    vertical-align: top; /* 设置垂直对齐方式为顶部 */
  }
</style>

在这个示例中，我们首先设置了外层容器的宽度为80%，并将其水平居中对齐。接着，我们在容器内放置了三个等宽的块元素，并设置它们的宽度为30%，外边距为1.666%。这里的30%是相对于容器宽度计算得到的，而外边距则是为了让三个块元素之间有一定的间隔。最后，我们设置了块元素的display属性为inline-block，这样它们就可以像行内元素一样排列在一行中。

运行效果：

当我们改变浏览器窗口大小时，块元素的宽度会自适应调整，保持在同一行中，不会出现换行的情况。

应用场景：

流式布局通常用于设计响应式的网页，适应不同屏幕尺寸的设备。比如，我们可以将页面分成若干列，每列的宽度都是根据父元素计算得到的百分比。这样，在不同设备上，页面会自动适应屏幕尺寸，达到更好的浏览效果。

浮动布局：

在进入具体内容之前，我们先来了解一下什么是浮动布局。浮动布局是CSS中通过浮动元素来实现页面布局的一种方式。一般来说，浮动布局的主要应用场景是实现多列布局，同时也可以实现其他的布局效果，比如文字环绕图片等。那么，浮动布局的具体使用方法是怎样的呢？让我们来看看下面这个示例代码。

<div class="container ">
  <div class="left"></div>
  <div class="right"></div>
</div>

在这个示例代码中，我们定义了一个容器元素，里面包含了左侧和右侧两个子元素。我们可以通过对这两个子元素进行浮动来实现一个简单的两列布局。具体代码如下：

.container {
  width: 960px;
  margin: 0 auto;
}
 
.left {
  float: left;
  width: 200px;
  height: 300px;
  background-color: #f00;
}
 
.right {
  float: left;
  width: 760px;
  height: 300px;
  background-color: #0f0;
}

在这段代码中，我们首先定义了容器元素的宽度和居中的样式。接着，对左侧和右侧两个子元素分别进行了浮动和样式的定义。通过这样的操作，我们就可以实现一个简单的两列布局了。

当然，浮动布局并不仅限于两列布局，我们还可以通过多次浮动来实现多列布局。但是在使用浮动布局时，需要注意一些问题，比如清除浮动、父元素高度塌陷等等。接下来，我们将会介绍一些实用的技巧来解决这些问题。

首先，清除浮动。在使用浮动布局时，经常会出现浮动元素导致父元素高度塌陷的问题，这时我们就需要使用清除浮动的方法来解决。一般来说，我们可以通过给父元素添加 overflow: hidden; 属性或者使用clearfix 来清除浮动。下面是两种方法的示例代码：

/* 使用overflow: hidden;清除浮动 */
.container {
  overflow: hidden;
}

/* 使用clearfix清除浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

除了清除浮动外，还有一些其他的技巧可以帮助我们更好地应用浮动布局。比如:

使用 clearfix 解决父元素高度塌陷的问题。
使用 clear 属性来清除特定方向上的浮动影响，如 clear:left 可以清除左侧浮动元素的影响。
使用 overflow 属性来触发 BFC（块级格式化上下文）以解决浮动元素对父元素的影响。
使用 calc() 函数结合百分比、像素和其他单位来计算宽度和高度，避免盒模型计算错误。
使用 flexbox 或 grid 布局来代替浮动布局，这些新的布局方式更加灵活且易于管理。

总结一下，浮动布局是CSS中最常用的布局方式之一，通过对元素的浮动来实现布局的效果。在使用浮动布局时，需要注意一些问题，比如清除浮动、父元素高度塌陷等等。

定位布局

在介绍定位布局之前，我们需要先了解一下CSS中的三种定位方式，它们分别是：static（默认值）、relative和absolute。在默认值static中，元素按照文档流排列。而在relative和absolute中，元素的位置就可以通过top、bottom、left、right四个属性来调整。

接下来，我们来看一下相对定位（relative）的使用。当我们将元素设置为相对定位时，它会在原来的位置上偏移。接下来我们通过实例代码来演示一下：

<div class="box">
  <p>这是一个段落</p>
</div>

.box {
  position: relative;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: #f00;
}

在上面的代码中，我们将box元素设置为相对定位，并且将left和top属性都设置为50px。这样一来，元素就会向右下方移动50个像素。这样我们就可以通过相对定位来调整元素的位置了。

接下来，我们再来看一下绝对定位（absolute）的使用。当我们将元素设置为绝对定位时，它会脱离文档流，相对于最近的已定位父元素进行定位。如果没有已定位的父元素，则相对于body元素进行定位。

我们来看一下一个例子：

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

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #ddd;
}
.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #f00;
  top: 50px;
  left: 50px;
}

在上面的代码中，我们将box元素设置为绝对定位，并且将它的父元素container设置为相对定位。这样一来，box元素就会相对于container元素进行定位。

接下来，我们可以通过调整top、bottom、left、right四个属性来调整元素的位置。比如：

<style>
  .wrapper {
    width: 80%;
    margin: 0 auto;
    font-size: 0; /* 设置字体大小为 0 */
  }

  .box {
    width: 30%;
    height: 100px;
    margin: 0 1.666%;
    background-color: #ccc;
    display: inline-block; /* 将 display 属性设置为 inline-block */
    vertical-align: top; /* 设置垂直对齐方式为顶部 */
  }
</style>0

这样一来，box元素就会相对于container元素的右侧偏移50个像素的位置进行定位。我们可以看到，通过绝对定位，我们可以轻松地将元素定位到任意位置，而不受文档流的影响。

最后，我们来看一下固定定位（fixed）的使用。当我们将元素设置为固定定位时，它会相对于浏览器窗口进行定位，不随页面滚动而滚动。我们可以通过以下代码来实现一个固定在页面右下角的按钮：

<style>
  .wrapper {
    width: 80%;
    margin: 0 auto;
    font-size: 0; /* 设置字体大小为 0 */
  }

  .box {
    width: 30%;
    height: 100px;
    margin: 0 1.666%;
    background-color: #ccc;
    display: inline-block; /* 将 display 属性设置为 inline-block */
    vertical-align: top; /* 设置垂直对齐方式为顶部 */
  }
</style>1

<style>
  .wrapper {
    width: 80%;
    margin: 0 auto;
    font-size: 0; /* 设置字体大小为 0 */
  }

  .box {
    width: 30%;
    height: 100px;
    margin: 0 1.666%;
    background-color: #ccc;
    display: inline-block; /* 将 display 属性设置为 inline-block */
    vertical-align: top; /* 设置垂直对齐方式为顶部 */
  }
</style>2

在上面的代码中，我们将按钮元素设置为固定定位，并且将它的位置设置为距离底部10像素，距离右侧10像素。这样一来，按钮元素就会一直停留在页面的右下角。

通过今天的学习，我们了解了CSS中的三种常见的布局方式：流式布局、浮动布局和定位布局。另外两种布局：弹性布局和栅格布局，我们会在后面的课程中给大家再介绍。感谢大家的收看，下次见！