重拾css(10)——display

1.引言

html元素，除了“块”就是“流”（即平时常说的块级元素和行内元素），而且“流”都包含在“块”中，例如body就是一个“块”，而a就是一个“流”。浏览器默认样式中规定了html元素哪些属于“块”（剩下的就是“流”）。

其实，这部分知识都囊括在display这个样式设置中。在网上查找出display所有的属性，你会发现它有很多，但是不是每个都常用，甚至大部分你都没有用过。这个没关系，学以致用，用不到的就可以先不学，知道就行，什么时候用，什么时候再去详细学——前提是你知道有这么个东西，否则无从下手。

常用的有：none、block、inline、inline-block、list-item、table、table-cell、inherit，有些已在《浏览器默认样式》中讲过，简单描述如下：

1. list-item：用于模拟li列表样式；

2. table：也是一个“块”，但和block相比，table具有包裹性；

3. table-cell：用于模拟表格单元格（类似table中的<td>和<th>）；

4. inherit：从父元素继承display属性的值。

接下来介绍其他几个常用的display值。

2.inline

常用的inline就是文字和图片，其实inline真没什么好说的，大家可以把它想象成一个杯子里的水，它是“流”，是没有大小和形状的。

<span style="border: 1px solid #ccc; width: 500px; height: 100px;">Hello World!</span>

上图可知，针对inline的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是auto，并不是我们设定的值。

那么，如何把inline元素转换成“块”元素呢？

最简单的是设置display:block;或display:table;

还有两种方式应该了解：

第一，对inline元素设置float

还是刚才那个例子，我们对span元素添加一个float:left，运行看看效果：

<span style="border: 1px solid #ccc; width: 500px; height: 100px; float: left;">Hello World!</span>

从显示的效果和监控的结果上看来，span元素已经“块”化。注意，上一节刚刚讲完float，不要忘记float的“破坏性”、“包裹性”，在这里同样适用。

第二，对inline元素设置position:absolute/fixed

还是有同一个例子做演示，这次在span元素上加上absolute/fixed，效果大家应该能猜到，和加上float的效果相同。至于absolute/fixed有什么特性，会在下一节介绍position时提到。

<span style="border: 1px solid #ccc; width: 500px; height: 100px; position: absolute;">Hello World!</span>

3.block

其实对于block，我觉得就是“盒子模型”。一个元素设置了block，它就必须遵循盒子模型的规则。因此，这里也不再去详细写它了，大家可以去盒子模型那一节好好看看，就那么点内容。

4.inline-block

浏览器默认样式中规定了几个html元素为display:inline-block;。

首先，你应该知道inline是什么样子的，就是一般的文字、图片；其次，你应该知道block是什么样子的，一般的div就是；最后，inline-block顾名思义，它既有inline的特性，又有block的特性，大家可以想想一般的button、input是什么样子的。

我们在页面中输入若干个<button>，发现它们是“流”式排列的（可以对比一下若干个<div>的排列方式）。但是针对一个button，我们还可以自定义修改它的形状，这样就有“块”的特征。

因此，inline-block的特点可以总结为：外部看来是“流”，但是自身却是一个“块”。