css知多少（10）——display

1. 引言

　　网页的全部元素，除了“块”就是“流”，并且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲《浏览器默认样式》的时候，你们也都看到了浏览器默认样式中规定了html元素哪些属于“块”（剩下的就是“流”）。这部分知识很是重要也很是基础，所以在全部的前端面试题中，都会问道哪些元素是“块”哪些元素是“流”。

　　

　　其实，这部分知识都囊括在display这个样式设置中。在网上查找出display全部的属性，你会发现它有不少，可是不是每一个都经常使用，甚至大部分你都没有用过。这个不要紧，学以至用，用不到的就能够先不学，知道就行，何时用，何时再去详细学——前提是你知道有这么个东西，不然无从下手。

　　

　　看上图。经常使用的属性有：none、block、inline、inline-block、inherit，其中inherit是继承父元素的样式，不用多说，其余的几个会在下文详解。其余的都不经常使用，可是有一些仍是须要点出来，其实这些已经在《浏览器默认样式》一节讲到了，这里简单描述一下，详细的能够参考浏览器默认样式一节。

1. list-item：经过它能够模拟li列表样式；
2. table：也是一个“块”，但和block相比，table具备包裹性；
3. table-cell：最新的多列布局解决方案；

2. inline

　　经常使用的inline就是文字和图片，其实inline真没什么好说的，你们能够把它想象成一个杯子里的水，它是“流”，是没有大小和形状的，它的宽度取决于父容器的宽度。

　　所以，针对inline的标签，你设置宽度和高度是无效的，经过监控能够知道，该元素实际的宽度和高度都是auto，并非咱们设定的值。

　　

      

　　一个很基础的问题：如何把inline元素转换成“块”元素？相信绝大部分人的回答是display:block，可是你应该知道这不是一个惟一的答案。至少我设置display:table也是能够的吧？

       还有两种状况你应该去了解（若是你不知道的话）：

       第一，对inline元素设置float

       仍是刚才那个例子，咱们对span元素添加一个float:left，运行看看效果，你就会大吃一惊。从显示的效果和监控的结果上看来，span元素已经“块”化。注意，上一节刚刚讲完float，不要忘记float的“破坏性”、“包裹性”，在这里一样适用。

　　

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

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

　　

3. block

　　本系列有一节重点讲解了《盒子模型》，不知道你们看没看过，或者说你已经很了解盒子模型了。

　　其实对于block，我以为就是“盒子模型”。一个元素设置了block，它就必须遵循盒子模型的规则。所以，这里也再也不去详细写它了，你们能够去盒子模型那一节好好看看，就那么点内容。

4. inline-block

　　这个话题还得从《浏览器默认样式》这一节开始。浏览器默认样式中规定了几个html元素为display:inline-block，回顾一下。

　　

　　初学者对于inline-block可能比较陌生，不要紧，一步一步来。首先，你应该知道inline是什么样子的，就是通常的文字、图片；其次，你应该知道block是什么样子的，通常的div就是；最后，inline-block顾名思义，它既有inline的特性，又有block的特性，你们能够想一想通常的button、input是什么样子的。

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

      

　　所以，inline-block的特色能够总结为：外部看来是“流”，可是自身确实一个“块”。不知道你们理解也无？

5. 总结

　　我看《css设计指南》书中关于display的内容就写了不到一页，侧面反映出display的内容不是不少，可是也看你怎么去理解和应用，若是详细品味起来，仍是颇有意思的。你们有意见的能够留言交流。

---------------------------------------------------------------

本系列的目录页面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

-------------------------------------------------------------------------------------------------------------

学习做者教程：《前端JS高级面试》《前端JS基础面试题》《React.js模拟大众点评webapp》《zepto设计与源码分析》《json2.js源码解读》

也欢迎关注个人开源项目——wangEditor，简洁易用的web富文本编辑器

-------------------------------------------------------------------------------------------------------------