W3.CSS-容器

W3.CSS是一种基于CSS的框架，具有内置的响应式设计，可以帮助开发人员快速构建漂亮的网站和应用程序。在W3.CSS中，容器是一种可以容纳内容的元素。本文将介绍W3.CSS中可用的容器类。

容器类

W3.CSS中使用.w3-container类来创建一个容器。该类可以使用在div、section或footer等元素上。

<div class="w3-container">
  <h2>This is a container</h2>
  <p>Some text..</p>
</div>

以上代码将创建一个具有默认样式的容器。

使用容器

下面是一些W3.CSS提供的可用于容器的类：

| Class | 描述 | | ---------------- | ------------------------------------------------- | | .w3-container | 默认容器样式 | | .w3-container.w3-red | 红色容器样式 | | .w3-container.w3-blue | 蓝色容器样式 | | .w3-container.w3-green | 绿色容器样式 | | .w3-container.w3-yellow | 黄色容器样式 | | .w3-container.w3-orange | 橙色容器样式 |

<div class="w3-container w3-red">
  <h2>This is a red container</h2>
  <p>Some text..</p>
</div>

<div class="w3-container w3-blue">
  <h2>This is a blue container</h2>
  <p>Some text..</p>
</div>

<div class="w3-container w3-green">
  <h2>This is a green container</h2>
  <p>Some text..</p>
</div>

<div class="w3-container w3-yellow">
  <h2>This is a yellow container</h2>
  <p>Some text..</p>
</div>

<div class="w3-container w3-orange">
  <h2>This is an orange container</h2>
  <p>Some text..</p>
</div>

约束宽度

W3.CSS中提供的.w3-container类是一个固定宽度的容器。这意味着容器的宽度会随着视口宽度的变化而发生变化。但可以使用.w3-content类来创建一个可约束宽度的容器。

<div class="w3-container w3-blue">
  <div class="w3-content">
    <h2>This is a constrained container</h2>
    <p>Some text..</p>
  </div>
</div>

以上代码将创建一个有限制宽度的蓝色容器。

总结

通过使用W3.CSS的.w3-container和.w3-content类，我们可以轻松地创建漂亮的容器。在实际开发中，您可以使用不同的颜色和样式来个性化您的容器。