可以实现的，就是这个效果。属性值属性值一般附加在主值上。例如，如果显示：表格；在main中设置值，可以使用display:table-row-group;和子元素中的其他属性，但它不是绝对的。关于它们的作用，主要参考主要价值就足够了。显示：表行组；详见display:table;。显示：表头组；详见display:table;。显示：表页脚组；详见display:table;。显示：表行；详见display:table;。显示：表格单元格；详见display:table;。这个属性需要详细解释一下，因为它可以独立应用，可以用于可变高度元素的垂直居中。具体可以参考张新旭的这篇文章。效果如下图所示：display:table-column-group;详见display:table;。显示：表列；详见display:table;。显示：表格标题；详见display:table;。显示：红宝石基；详见display:ruby??;。显示：红宝石文本；详见display:ruby??;。显示：ruby-base-container；详见display:ruby??;。显示：红宝石文本容器；详见display:ruby??;。显示值MDN称之为值（框值），我称之为显示值，主要是为了便于理解。显示：内容；这可能是2018年初最激动人心的事件：Chrome65终于支持显示：内容；！Firefox早就支持了，而Chrome直到现在才开始支持。这么重要的功能，它有什么作用呢？结果可能会让你失望。原来的布局是这样的：添加display:contents之后；到中间的div，就变成这样了：这就是display:contents;的作用，它让子元素和父元素有相同的布局，仅此而已。显示：无；这么有名的值还需要多说吗？混合值显示：inline-block；关于显示效果：inline-block；恐怕只要做过3天以上的前端工程师，就应该知道了。话不多说，总结一下上一张名图：display:inline-table;如果你能理解inline-block，你就能理解inline-table。内联显示一个表格，像这样：display:inline-flex;不用说了吧？同上，在行中进行灵活布局，参考display:flex;。显示：内联网格；同上，行内网格布局，参考display:grid;。全局值这些值并不是display属性独有的，几乎任何其他属性都可以使用，这里列出来凑个数。显示：继承；继承父元素的显示属性。显示：初始；无论父元素如何设置，它都会恢复到浏览器的初始显示属性。显示：未设置；取消设置混合继承和初始。如果父元素设置了值，则使用父元素的设置，如果父元素没有设置值，则使用浏览器的默认设置。最好直接看图：总结一下，以上就是css写display的32种方式。说了这么多，你还记得多少？其实简单理解各个显示属性的值并不难。难点在于掌握好，在合适的地方使用合适的值。毕竟我们的目的是写短代码，而不是长代码。如果怕自己记不清楚，请收藏这篇短文，说不定有一天，你会需要它。