详述display样式属性(none block inline inline-block)

display样式属性设置元素生成的框的类型，该属性有多个值，在此仅介绍常用的4种属性：none、block、inline、inline-block。

一、none

此元素不会被显示。示例如下：

郑州大学

运行结果如下图：

结果分析：由于设置display样式属性值为none，所以div标签中的内容不会显示且不占用位置。

二、block

此元素将显示为块级元素，此元素前后会带有换行符。示例如下：

运行结果如下图：

结果分析：input标签原本是行内元素，但是设置display样式属性值为block后变成了块级元素，有自动换行的效果。

三、inline

默认。此元素会被显示为内联元素，元素前后没有换行符。示例如下：

郑州大学

运行结果如下图：

结果分析：div标签原本是块级元素，但是设置display样式属性值为inline后变成了行内元素，失去了自动换行的效果且包裹内容。

四、inline-block

行内块元素(CSS2.1 新增的值)。示例如下：

郑州大学
郑州大学
郑州大学

运行结果如下图：

结果分析：a标签原本是行内元素，不能为其设置高度和宽度，但是设置display样式属性值为inline-block后，将其变成了行内块元素，可以为其设置高度和宽度。