CSS 如何创建宽度/高度相等的盒子以适应屏幕宽度

在本文中，我们将介绍如何使用CSS来创建宽度和高度相等的盒子，以适应屏幕宽度。我们将从基本的概念开始，然后逐步引入实现这一目标的不同技术和示例。

阅读更多：CSS 教程

盒子模型

在CSS中，每个元素都有一个盒子模型，它定义了元素的尺寸和边距。盒子模型由四个关键部分组成：内容区域、内边距、边框和外边距。要创建宽度和高度相等的盒子，我们需要确保这些部分都被正确地设置和计算。

设置宽度和高度

要使盒子的宽度和高度相等，我们可以使用CSS的width和height属性。将这两个属性设置为相同的值会使盒子的尺寸保持一致。例如，要创建一个200像素的正方形盒子，可以这样写：

.box {
  width: 200px;
  height: 200px;
}

使用百分比

为了使盒子的宽度和高度适应屏幕宽度，我们可以使用百分比值而不是固定的像素值。通过将width和height属性设置为百分比，盒子的尺寸将相对于其父元素的尺寸进行计算。例如，要创建一个宽度和高度均为屏幕宽度50%的盒子，可以这样写：

.box {
  width: 50%;
  height: 50%;
}

这样设置后，无论屏幕宽度如何变化，盒子的宽度和高度都将保持一致，并且相对于屏幕宽度进行自适应调整。

使用视口单位

除了百分比，我们还可以使用视口单位来实现宽度和高度相等的盒子。视口单位是相对于视口的大小进行计算的特殊单位。最常用的视口单位是vw和vh，它们分别表示视口宽度的百分之一和视口高度的百分之一。所以，通过将width和height属性设置为相同的视口单位值，我们可以创建宽度和高度相等的盒子。例如，要创建一个宽度和高度都为视口宽度的50%的盒子，可以这样写：

.box {
  width: 50vw;
  height: 50vw;
}

这样设置后，无论视口大小如何变化，盒子的宽度和高度都将保持一致。

使用表格布局

除了上述方法之外，我们还可以使用CSS的表格布局来创建宽度和高度相等的盒子。表格布局是一种强大的布局技术，可以让我们更好地控制元素的尺寸和位置。要使用表格布局，我们需要将容器元素的display属性设置为table，然后将子元素的display属性设置为table-cell。这样，子元素将以表格的方式布局，并将自动调整宽度和高度以保持一致。例如，要创建一个宽度和高度都相等的盒子，可以这样写：

.container {
  display: table;
}

.box {
  display: table-cell;
}

使用Flexbox布局

Flexbox布局是一种强大的CSS布局技术，可以快速简便地创建宽度和高度相等的盒子。Flexbox通过将容器元素的display属性设置为flex，然后使用flex-grow属性来控制子元素的宽度和高度。通过将flex-grow属性设置为相同的值，子元素将平均分配容器的可用空间，从而实现宽度和高度相等的盒子。例如，要创建一个宽度和高度都相等的盒子，可以这样写：

.container {
  display: flex;
}

.box {
  flex-grow: 1;
}

总结

在本文中，我们介绍了如何使用CSS来创建宽度和高度相等的盒子以适应屏幕宽度。我们探讨了基本的概念，并提供了使用百分比、视口单位、表格布局和Flexbox布局的示例。通过适当地设置和计算盒子的尺寸，我们可以实现宽度和高度相等的盒子，并使其适应不同的屏幕宽度。

希望本文对你在使用CSS创建宽度和高度相等的盒子方面有所帮助！