css盒子不加高度

在CSS中，有一个非常重要的概念，那就是盒子模型。盒子模型可以帮助开发者更好地控制网页上的布局和样式。然而，在使用CSS盒子模型时，有一种经常会被忽略的情况，那就是盒子不加高度。

.box {
  width: 200px;
  border: 1px solid black;
  padding: 10px;
}
 

上面的代码定义了一个名为.box的CSS类。这个类表示一个宽度为200像素、带有黑色边框和10像素内边距的盒子。然而，由于我们没有设置盒子的高度，所以在网页上这个盒子将不会有任何可见的内容。

这时候，你可能会想到给盒子设置一个高度值，比如：

.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
}
 

上面的代码在box类中添加了一个height属性，使盒子的高度变为100像素。现在，这个盒子里面就可以添加内容了，并且网页上也可以看到这个盒子的位置和大小了。

事实上，如果我们设置了盒子的padding和border属性，而没有设置height属性，那么这个盒子的高度就会自动计算为内容部分的高度加上padding和border的高度。

也就是说，我们可以只设置上下的padding和border属性，而不设置盒子的高度，就可以让盒子大小自适应内容的高度了，比如：

.box {
  width: 200px;
  border: 1px solid black;
  padding-top: 10px;
  padding-bottom: 10px;
}
 

上面的代码中，我们只设置了盒子的上下padding属性，但没有设置盒子的高度。这样，盒子的高度就会自适应其中内容的高度，同时留出了10像素的padding空间。

综上所述，如果我们没有设置盒子的高度，那么盒子的高度将自动计算为内容部分的高度加上padding和border的高度。这样，我们可以根据实际的需要来灵活地设计网页的布局和样式。