前言
我们上节讲了行内元素和块级元素，引出了display，那display到底有多少个值呢？
display详解
display常用的有一些，我们现在先了解前四个：
- block:让元素显示为块级元素
- inline:让元素显示为行内级元素
- inline-block:让元素同时具备行内级、块级元素的特征
- none:隐藏元素
下文将对以上四个属性进行详细的拆解。
block
块级元素，独占父元素的一行，可以随意设置宽高，高度默认由内容决定。
除p标签外，可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素)。
常见的有：div p h 等。
inline
行内元素，跟其他行内级元素在同一行显示，不可以随意设置宽高，宽高都由内容决定。
一般情况下，只能包含行内级元素。
常见的有：span a img 等。
inline-block
跟其他行内级元素在同一行显示，可以随意设置宽高。
除p标签外，可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素)。
常见的有：button input 等。
none
隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
隐藏元素
请注意，隐藏元素并不只有这一种方法，这里将给出常见的四种，是一道比较常见的面试题：
- display: none
元素不显示出来，并且也不占据位置，不占据任何空间(和不存在一样) - visibility: hidden
设置为hidden，虽然元素不可见，但是会占据元素应该占据的空间 - color: rgba(red, green, blue, 0)
rgba设置颜色，将a的值设置为0，rgba的a设置的是alpha值，可以设置透明度，不影响子元素 - opacity: 0
设置透明度为0，即设置整个元素的透明度，会影响所有的子元素
总结
本节讲述了display这个属性的四个常见值：block 为行内元素；inline 为块级元素，inline-block 为行内块元素，none 为隐藏元素；以及四种隐藏元素的方法。