如何使顶部栏保持方形空间

当我们在开发一个网页时，经常需要设计一个顶部栏。而有时候我们可能会遇到一个问题，就是当浏览器窗口改变大小时，顶部栏的高度和宽度比例发生了变化，导致顶部栏的形状不再是方形。那么如何解决这个问题呢？

第一种方法：使用固定高度和百分比宽度

我们可以给顶部栏设置一个固定的高度，比如说60px，并且给顶部栏的宽度设置一个百分比值，比如说100%。这样一来，当浏览器窗口大小改变时，顶部栏的宽度会随着浏览器窗口的改变而改变，但是高度是不变的，所以就可以保持顶部栏的方形形状了。

.header {
  height: 60px;
  width: 100%;
}

第二种方法：使用 padding-top 和百分比宽度

另外一种方法是使用 padding-top 属性来实现，我们可以给顶部栏设置一个固定的 padding-top，比如说25%，并且给顶部栏的宽度设置一个百分比值，比如说100%。这样一来，当浏览器窗口大小改变时，顶部栏的宽度会随着浏览器窗口的改变而改变，但是 padding-top 的值是基于父元素的宽度计算的，所以也可以保持顶部栏的方形形状了。

.header {
  width: 100%;
  padding-top: 25%;
}

第三种方法：使用伪元素

还有一种方法是使用伪元素来实现，我们可以使用 ::before 和 ::after 伪元素来创建两个正方形，然后将它们放在顶部栏的左右两侧，并用 flex 布局使它们平分顶部栏的宽度。

.header {
  display: flex;
}

.header::before {
  content: "";
  flex-grow: 1;
  padding-top: 100%;
}

.header::after {
  content: "";
  flex-grow: 1;
  padding-top: 100%;
}

这三种方法都可以使顶部栏保持方形空间，具体使用哪种方法取决于实际需求以及个人喜好。