5.7.1 实现display属性

在CSS中，隐藏和显示通常使用display属性来实现，在Bootstrap 4中也是通过它来实现的，只是在Bootstrap 4中用d来表示，表达方式如下：

    .d-{sm、md、lg或xl}-{value}

value的取值说明如下。

■ none：隐藏元素。

■ inline：显示为内联元素，元素前后没有换行符。

■ inline-block：行内块元素。

■ block：显示为块级元素，此元素前后带有换行符。

■ table：元素会作为块级表格来显示，表格前后带有换行符。

■ table-cell：元素会作为一个表格单元格显示（类似<td>和<th>）。

■ table-row：此元素会作为一个表格行显示（类似<tr>）。

■ flex：将元素作为弹性伸缩盒显示。

■ inline-flex：将元素作为内联块级弹性伸缩盒显示。

在下面示例中，使用display属性设置div为行内元素，设置span为块级元素。

【例5.22】display属性示例。

在IE 11浏览器中运行结果如图5-25所示。

图5-25 display属性作用效果