首先，我们来看一下display在MDN中的介绍
display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局
这里阐述了display影响的两个方面：内部和外部。
首先我们来看一下外部。
在html中，元素的默认布局样式是一种叫做“文档流布局的方式”：就像我们书写文字一样，由上到下，纵向布局。
元素在布局中的变现为：
当display的属性被设置为：block时，浏览器会在标签的内容前后添加换行符，此时表现得形式就是，被标签包含的内容，会在独立的一行中。与他相连的标签会另起一行。 代表标签：<div>
当display的属性被设置为：inline时，浏览器不会增加换行符，此时的表现就是，连续书写两个同为inline标签时，两者的内容将会衔接在一起，不会换行。代表标签：<span>
元素在宽度的表现：
block：元素独占一行，与父元素宽度相等。
inline：元素的宽度由内容撑开，内容的宽度决定元素的宽度。
在实际工作中遇到的场景：
1.子元素的宽高由父元素决定，当内容溢出时，表现为滑动或隐藏。这个时候制定display为block，父元素宽高限定，子元素的宽高为父元素的百分比即可。
2.父元素的宽高，由子元素的内容撑起。这个时候父元素的宽高不限定，但是display要为inline。子元素的宽高，将会撑起父元素。inline标签的内部无法放置其他block标签
3.inline的缺陷在于无法指定padding和margin。如果我们想要一个元素，宽高由子元素撑起，但是又要设置，padding，margin时，就需要另一个属性：inline-block.他能满足我们的需求
