CSS 数字和字母将容器撑大问题解决

当我们使用CSS设置一个容器的大小时，通常会使用 width 和 height 属性，但是有时候我们会遇到这样的问题：当我们在容器内添加一些装饰性的元素，如边框或阴影等，这些元素都会增加容器的宽度和高度，让容器撑大，而我们设置的原本的 width 和 height 属性将会失效。这个问题可以通过使用CSS数字和字母的组合来解决。

1. 使用 padding 实现盒子高度自适应

当我们在一个容器中添加了 padding 属性后，它会增加容器的大小，这个大小增加的部分不会影响容器内部元素的大小和位置。利用这个特性，我们可以使用 padding 来让容器高度自适应。

示例代码如下：

<div class="container">
  <div class="content">
    <p>这是一段文字。</p>
  </div>
</div>

<style>
.container {
  width: 200px;
  padding-bottom: 50%;
  background-color: pink;
}
.content {
  background-color: yellow;
}
p {
  margin: 0;
}
</style>

在这个示例中，我们为容器 .container 设置了 padding-bottom: 50%;，这个值是相对于容器的宽度计算的，意味着容器底部的 padding 高度将会是容器宽度的一半。因此当容器宽度为200px时，容器的高度就会被撑开，让容器高度自适应。

2. 使用 ::before 和 ::after 实现无需添加额外标签的装饰

如果我们想要为容器添加装饰性的元素，如实心背景与新的边框，可以尝试使用 :before 和 :after 伪元素。

示例代码如下：

<div class="container">
  <p>这是一段文字。</p>
</div>

<style>
.container {
  width: 200px;
  border: 2px solid blue;
  position: relative;
}
.container::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: yellow;
  z-index: -1;
}
p {
  margin: 0;
  padding: 20px;
}
</style>

在这个示例中，我们使用了 :before 伪元素来创建了一个覆盖整个容器的黄色背景，并使用 calc 函数来计算它的宽度和高度。现在我们可以在容器内添加任意数量的元素，而不会影响到容器的大小。