css不定高度边框不显示

在CSS中设置不定高度元素的边框时，有时候会发现边框并没有完全显示出来。这种情况通常是因为元素的内容区域层级比较深，或者是设置了边距或内边距造成的。

例如，以下代码中的元素设置了边框和内边距：

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim pellentesque, malesuada urna sed, rhoncus libero. Duis pretium lorem et dolor sagittis elementum. Vivamus consequat viverra ligula id feugiat. Integer ornare consequat libero sit amet commodo. Sed mattis viverra sapien, at hendrerit nulla dapibus vel.</p>
</div>

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

输出结果：边框没有完全显示出来。

为解决这个问题，可以使用盒子模型的box-sizing属性来改变元素盒模型的计算规则。在设置box-sizing为border-box时，元素的内边距和边框大小将被包含在元素的高度和宽度之内。

修改后的代码：

.box {
  border: 1px solid black;
  padding: 10px;
  box-sizing: border-box;
}

输出结果：边框完全显示出来。

通过设置box-sizing，我们可以更加灵活地控制边框的显示效果，让网页的布局更加美观。