[分享]css元素不显示高度会

在CSS中，我们经常需要设置元素的高度（height）属性来控制元素的大小和排版。然而，在某些情况下，我们会发现元素的高度没有生效，导致元素无法正常显示。那么，这是为什么呢？.box { height...

在CSS中，我们经常需要设置元素的高度（height）属性来控制元素的大小和排版。然而，在某些情况下，我们会发现元素的高度没有生效，导致元素无法正常显示。那么，这是为什么呢？

.box {
  height: 100px;
  width: 100px;
  background-color: red;
} 

首先，我们来看看一段简单的CSS代码。我们定义了一个高为100px、宽为100px，背景颜色为红色的盒子。如果这段代码生效，我们会看到一个正常显示的红色盒子。

然而，在某些情况下，这个盒子会变得不可见或者显示不完整。这时候，我们需要检查一下以下几个问题：

1、元素是否已经被隐藏？

如果一个元素的display属性值为none，那么它是不会被显示的，即使你设置了它的高度。因此，我们需要确保元素不是被隐藏了。

.box {
  display: none;
} 

2、是否存在浮动元素？

当一个元素设置了浮动属性（float: left/right），它会脱离正常的文档流并且不会对父元素的高度产生影响。这种情况下，我们需要为父元素设置清除浮动（clear: both）。

.parent:after {
  content: "";
  display: table;
  clear: both;
} 

3、是否存在内外边距？

在默认情况下，元素的内外边距（padding和margin）会相对于元素的高度叠加。如果你想让元素的高度与内外边距之和相等，可以使用box-sizing属性为元素设置盒模型。

.box {
  box-sizing: border-box;
  height: 100px;
  padding: 10px;
} 

在实际开发中，不显示高度的原因可能会更加复杂。但只要我们善于使用开发者工具和阅读文档，我们就能找到问题所在并解决它。