重拾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的特色能够总结为：外部看来是“流”，可是自身倒是一个“块”。