display属性的用法

面对HTML一系列元素的设计和排版，CSS提供了许多样式属性。其中，display属性可以算是最常用、最基础的属性之一。它的作用是控制元素如何显示。

display属性以前可以只有一种值，它代表标准文档流中对应的元素类型。但是，随着CSS2.1规范的发布，display属性扩展了更多的属性值。现有的display属性值有以下几种。

block

block是display属性的默认值。它指元素会生成一个块级框。这个元素会新起一行，那么它前后的元素都排列在一行之上或之下。block元素的宽度默认为100%。

inline

inline是另一种常用的情况。与block元素不同，inline元素不新起一行，而只是在当前行内“内联”显示。inline元素的宽度默认以内容宽度为准，自适应当前内容。通俗地讲，inline元素是指的一组并排的子元素。

inline-block

inline-block是block元素和inline元素混合的形态。inline-block元素会在一行内显示，但它的默认宽度是其本身内容的宽度。所以，可以使得inline-block元素自适应宽度，同时又能够与其它inline元素并排在同一行中显示，非常灵活方便。

none

与上述几个属性值不同，none值指元素不显示，占据HTML结构却不显示。none使用场景广泛，比如语言切换时，通过display:none实现显隐效果。再比如，众所周知的jQuery中，hide和show方法就是利用了display:none和display:block来实现显隐切换的。

其他属性值

除上述四种display属性值外，还有table-cell、table-row、flex等属性值。这些属性值在实际的排版中也非常有用。

table-cell和table-row可用来模拟表格。虽然HTML有table元素，但是一些需求可能无法满足。使用CSS中的table-cell和table-row可以更灵活、更自由地模拟出表格的排版。

flex布局模型是HTML5最新的特性之一。它提供了一种更加灵活和强大的布局模型，解决了传统布局模型的诸多问题。可以说，flex就是将display属性推向了另一巅峰。

因此，掌握display属性的使用，不仅能让页面排版更加合理美观，更能提供更多的布局手段，为Web开发提供更多的可能性。