在网页设计中，常常会遇到需要让子元素高度自动分配的情况，而 CSS 中的 display: table 就能巧妙地解决这一问题。

display: table 是 CSS 布局中一个强大的属性值。当为父元素设置 display: table 后，它的行为就类似于 HTML 中的 table 元素。此时，子元素的布局和高度分配规则会发生变化，以适应类似表格的布局模式。

要理解这种布局模式的基本原理。在普通的块级元素布局中，子元素的高度通常由其内容决定，或者通过显式设置固定高度来确定。但在 display: table 布局下，子元素的高度会根据行高的分布自动调整。例如，一个包含多个子元素的父容器，设置 display: table 后，这些子元素就如同表格中的单元格一样，它们会根据内容最多的那个子元素来自动分配高度，以确保同一“行”的所有子元素高度一致。

具体实现时，需要对父元素和子元素分别进行适当的设置。对于父元素，除了设置 display: table，还可以设置其他与表格相关的属性，如 border-collapse 来控制边框合并等。而对于子元素，通常设置 display: table-cell，使其具有表格单元格的特性。

假设我们有一个导航栏，需要每个菜单项高度一致。可以将导航栏的父元素设置为 display: table，然后将每个菜单项设置为 display: table-cell。这样，无论菜单项的文字内容多少，它们都会具有相同的高度，提升了导航栏的整体美观度和一致性。

然而，使用 display: table 实现子元素高度自动分配也并非没有局限性。它在响应式设计中的灵活性相对较弱，可能需要额外的媒体查询来调整布局。而且，对于一些复杂的布局场景，可能需要更细致的 CSS 调整才能达到理想效果。

CSS 中用 display: table 实现子元素高度自动分配是一个实用的技巧，能在很多布局场景中发挥重要作用。只要合理运用，并注意其局限性，就能为网页设计带来更多的可能性和更好的用户体验。