一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。
1、display的值及作用
block转换成块状元素。inline转换成行内元素。none设置元素不可见（该种方法的不可见是使得整个dom元素从文档流中去掉，而不只是单纯的样式上的隐藏）。inline-block具备了行内元素不换行的特征，同时也有块元素可以设置宽高的特征list-item象块类型元素一样显示，并添加样式列表标记。table此元素会作为块级表格来显示inherit规定应该从父元素继承display属性的值
在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是【换行符/空格间隙问题】。
display:inline-block 什么时候不会显示间隙？
- 移除空格
- 使用
margin负值 - 使用
font-size:0 letter-spacingword-spacing
2、定位position的值及作用
static默认值。没有定位，元素出现在正常的流中。absolute：生成绝对定位的元素，相对于定位值是static以外的第一个父辈元素进行定位fixed：生成绝对定位的元素，相对于浏览器窗口进行定位relative：生成相对定位的元素，相对于其正常位置进行定位inherit规定从父元素继承position属性的值
relative相对于自身定位，可以设置位置偏移，但是自身原本在正常文档流中的位置还保留，所以**relative是不脱离文档流的**。
定位值为absolute、fixed的时候，原本自身在正常文档流中的位置不保留，代码中后面的元素会顶上，absolute、fixed定位是脱离正常文档流的。
3、浮动
浮动的元素也会使其脱离正常文档流。浮动的框可以向左float: left或向右float: right移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。
行内元素float:left后是否变为块级元素？
行内元素设置成浮动之后变得更加像是inline-block（行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是100%），这时候给行内元素设置padding-top和padding-bottom或者width、height都是有效果的
4、display、float、position的关系
-
如果
display取值为none，那么position和float都不起作用，这种情况下元素的display不受影响。 -
如果
position取值为absolute或者fixed，框就是绝对定位的，float属性不生效，display根据下面的表格进行调整。设置值 计算值 inline-table table inline、inline-block、table-cell、
table-row、table-column、table-caption、
table-row-group、table-column-group、
table-header-group、table-footer-groupblock 其他值 与设置值一样 -
如果
position不为absolute或者fixed，若float的值不为none，那么display转化的规则和上面一条一样。另外，如果position的值为relative并且float属性的值存在，则relative相对于浮动后的最终位置定位（先浮动生效再relative定位生效）。 -
如果没有定位且float为none，则看是否为根元素。如果元素是根元素，
display根据上面表格规则进行调整 -
其他情况下
display的值为指定值
总结起来：
- 绝对定位、浮动、根元素都需要调整
display - 可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display'的值也需要调整；
- 元素的'float'特性的值不是"none"的时候或者它是根元素 的时候，调整'display'的值；
- 最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display'特性值同设置值。
