关键词：
1. 引言
网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲《浏览器默认样式》的时候，大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”（剩下的就是“流”）。这部分知识非常重要也非常基础，因此在所有的前端面试题中，都会问道哪些元素是“块”哪些元素是“流”。
其实，这部分知识都囊括在display这个样式设置中。在网上查找出display所有的属性，你会发现它有很多，但是不是每个都常用，甚至大部分你都没有用过。这个没关系，学以致用，用不到的就可以先不学，知道就行，什么时候用，什么时候再去详细学——前提是你知道有这么个东西，否则无从下手。
看上图。常用的属性有：none、block、inline、inline-block、inherit，其中inherit是继承父元素的样式，不用多说，其他的几个会在下文详解。其他的都不常用，但是有一些还是需要点出来，其实这些已经在《浏览器默认样式》一节讲到了，这里简单描述一下，详细的可以参考浏览器默认样式一节。
- list-item：通过它可以模拟li列表样式；
- table：也是一个“块”，但和block相比，table具有包裹性；
- 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的内容不是很多，但是也看你怎么去理解和应用，如果详细品味起来，还是很有意思的。大家有意见的可以留言交流。
css知多少——选择器的优先级（转）
1.引言 上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。 上图中，css中的两个选择器都是针对<span>的，而且两个设置的颜色不一样，这里的... 查看详情
css知多少——float下篇（转）
float内容比较多，咱们分上、下两篇来介绍，上篇已经写完，这是下篇。建议大家先把上篇看了，再来看下文，精彩内容不要掠过啊。1.清除float 《上篇》中我们提到，float具有“破坏性”，它会导致父元素“坍塌”，这... 查看详情
转：css知多少——我来问你来答
1.引言 各位前端或者伪前端（比如作者本人）的同志们，css对你们来说不是很陌生。比如我，在几年之前上大学的时候，给外面做网站就用css，而且必须用css。这样算下来也得六年多了，有些功能可能轻车熟路，有些功能可... 查看详情
overflow知多少（转）
最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：12.bodyoverflow:hidden;_overflow:visible;_zoom:1;.mainoverflow:hidden;_overflow:visible;_zoo 查看详情
css知识体系你知多少？（前端技术）
...r.js的相关介绍））2、常用的html标签，它们的display属性一般默认为block和inline。有哪些常用标签的display不是block和inline，这些标签显示的时候和block/inline有何区别？具体display属性值有如下：inline可以理解... 查看详情
css知识体系你知多少？（前端技术）
...r.js的相关介绍））2、常用的html标签，它们的display属性一般默认为block和inline。有哪些常用标签的display不是block和inline，这些标签显示的时候和block/inline有何区别？具体display属性值有如下：inline可以理解... 查看详情
为知笔记代码高亮css文件
1/*2Originalstylefromsoftwaremaniacs.org(c)IvanSagalaev<[email protected]>3*/4.hljs{5display:block;padding:0.5em;6background:#F0F0F0;7}8.hljs,9.hljs-subst,10.hljs-tag.hljs-title,11.lisp.hlj 查看详情
[转]梦里babel知多少(代码片段)
平时开发中，经常需要用到ES6/ES7的语法。那么就需要用到Babel来对代码进行转码处理。 之前用Vue比较多，所以以Vue-cli作为参考来分析。 第一张图是几个月前的Vue-cli生成的 第二个图是今天使用Vue-cli生成的Babel-core顾... 查看详情
css知多少（11）——position
1.引言 本文将用一篇文章介绍position（定位），在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途... 查看详情
九种浏览器端缓存机制知多少（转）
浏览器缓存（BrowserCaching）是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。浏览器端缓存的机制种类较多... 查看详情
overflow知多少
本文地址: http://www.hicss.net/some-overflow-knowledge/最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：12.body{overflow:hidden;_overflow:visible;_zoom:1;}.main{overflo 查看详情
css-display
display display:none;--让标签消失 display:inline; display:block; display:inline-block; 具有inline,默认自己有多少占多少 具有block，可以设置无法设置高度，宽度，paddingmargin ****** 行内标签：无法设置高度，宽度，pa... 查看详情
css选择器优先级（转）
...//www.w3.org/TR/css3-selectors/#specificity1.引言 上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说 查看详情
项目管理过程知多少
美国项目管理协会PMI2012年提出的项目管理有47个过程。47个管理过程有2种分类方式，一种按照这些过程发生的时间先后分成“启动、计划、执行、监控、收尾”5个项目过程组；另一种按照同类知识合并为整体管理、范围管理、... 查看详情
ffmpeg知多少~~~
一、ffmpeg安装：https://jingyan.baidu.com/article/f7ff0bfcd64cea2e26bb1334.html 二、ffmpeg视频处理（包括各种视频流处理~）：三、ffmpeg推流步骤：1）通过ffmpeg截取指定长度的视频流：ffmpeg-t10-irtsp://xxx:xxxxx1234@172.20.xx.xxx:55410s_out 查看详情
infiniband带宽知多少，一幅图表让你明白什么是qdrfdr10fdredr......
说的简单一点是：主板PCI-E插槽有分一代、二代、三代等，每一代的编码效率不一样。各种规格的InfiniBand板卡设备设计编码以及与所插入的插槽都有一定的说法。一代8b/10b二代8b/10b 二代64b/66b(两种说法都有)三代128b/130b插... 查看详情
eshoponcontainers知多少[10]：部署到k8s|aks(代码片段)
1.引言断断续续，感觉这个系列又要半途而废了。趁着假期，赶紧再更一篇，介绍下如何将eShopOnContainers部署到K8S上，进而实现大家常说的微服务上云。2.先了解下Helm读过我上篇文章ASP.NETCore借助K8S玩转容器编排的同学，想必对K8S... 查看详情
数据标注行业知多少
据相关资料显示，在中国，有10万的全职数据标注员，100万的兼职数据标注员。看到这个数据，不禁想问数据标注到底是一个怎样的行业？其实早在1998年第一家标注公司成立的时候，该行业就已经出现，只是那时人工智能尚未兴... 查看详情