CSS 3 div宽度分配问题

在本文中，我们将介绍如何使用CSS 3来实现div的宽度分配问题。具体来说，我们将学习如何使div的中间部分占据剩余的宽度。

阅读更多：CSS 教程

初识div

在学习如何实现div宽度分配之前，我们首先需要了解一下div是什么。div是HTML中最常用的元素之一，它代表一个独立的块级容器。我们可以使用div来组织和布局网页的不同部分。例如，我们可以使用div来创建网页的头部、导航栏、内容区域和底部等。

下面是一个简单的示例，展示了如何使用div来布局一个网页的结构：

<!DOCTYPE html>
<html>
  <head>
    <title>Div布局示例</title>
    <style>
      .header {
        height: 100px;
        background-color: gray;
      }

      .nav {
        height: 50px;
        background-color: blue;
      }

      .content {
        height: 300px;
        background-color: yellow;
      }

      .footer {
        height: 100px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="nav"></div>
    <div class="content"></div>
    <div class="footer"></div>
  </body>
</html>

在上面的示例中，我们使用了四个不同的div来创建网页的头部、导航栏、内容区域和底部。每个div都有不同的高度和背景颜色，以便于我们区分它们。

实现div的宽度分配

现在让我们来看看如何实现div的宽度分配。默认情况下，div元素会自动占据父级容器的全部宽度。但是，如果我们想要实现一个布局，其中某个div占据剩余的宽度，就需要使用CSS 3的新特性：flexbox。

flexbox是一种强大的布局模型，可以轻松实现复杂的网页布局效果。它使用flex属性来控制元素的排列方式、对齐方式和伸缩性。下面是一个使用flex属性实现div宽度分配的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Flexbox布局示例</title>
    <style>
      .container {
        display: flex;
      }

      .left {
        width: 200px;
        background-color: red;
      }

      .middle {
        flex: 1;
        background-color: yellow;
      }

      .right {
        width: 200px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

在上面的示例中，我们将三个div元素放置在一个容器中，并使用display: flex;将容器设置为弹性布局。

然后，我们通过为middle类添加flex: 1;属性，使它占据剩余的宽度。这意味着middle类将会自动根据其他div的宽度来调整自己的宽度。

高级宽度分配

除了使用flex属性之外，我们还可以使用其他方法来实现高级的宽度分配效果。例如，我们可以使用CSS 3的calc()函数来计算div的宽度。

下面是一个示例，展示了如何使用calc()函数来实现div的宽度分配：

<!DOCTYPE html>
<html>
  <head>
    <title>Calc函数示例</title>
    <style>
      .left {
        width: 200px;
        background-color: red;
      }

      .middle {
        width: calc(100% - 400px);
        background-color: yellow;
      }

      .right {
        width: 200px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </body>
</html>

在上面的示例中，我们使用calc()函数来计算middle类的宽度。具体来说，我们将100%的宽度减去左侧div和右侧div的宽度，然后将结果赋给middle类的宽度属性。

这样，middle类将会自动根据浏览器窗口的宽度来调整自己的宽度，同时保证左右两侧div的宽度不变。