1. 前言
在HTML学习中，我们曾经讲过一个重要概念：块级元素div、行级元素span。它们的区别是：块级元素独占一块区域，所以后面换行；而行级元素只会占用当前行，所以后面不换行。
在上一篇文章中，我们又接触了CSS盒子模型，我们进一步了解了，在网页上，所有元素其实相当于一个盒子，会占据一定的空间。那么块级元素、行级元素，其实说的就是元素占用空间的方式，是占用一块，还是占用一行的区别。
元素占用空间的方式，用比较专业的名词来讲，就是元素的盒类型，或者说显示类型，仔细品味的话，就能发现这三种说法是一个意思。
实际上，在CSS中，我们可以通过display属性，指定元素的显示类型，直接让元素按我们想要的方式显示。
2. 块级元素block
block表示将元素设定为块级元素，也就是说单独的占用一块，这一块跟前后的元素在垂直方向是隔离的，相当于前后都有换行符。
看如下代码：
<head> <meta charset="utf-8"> <style> .display-block { display: block; background-color: grey; } </style> </head> <body> <span>春眠不觉晓</span> <span class="display-block">处处闻啼鸟</span> <span>夜来风雨声</span> <span>花落知多少</span> </body>
正常情况下， span是行级元素，前后不会换行。但是咱通过display: block;将其盒类型修改为了块级元素，所以效果如下：
3. 行级元素inline
inline表示将元素设置为行内元素，其实就是不换行，跟旁边的元素一个样子。
看如下例子：
<head> <meta charset="utf-8"> <style> .display-inline { display: inline; background-color: grey; } </style> </head> <body> <span>春眠不觉晓</span> <div class="display-inline">处处闻啼鸟</div> <span>夜来风雨声</span> <span>花落知多少</span> </body>
原本div是要前后换行的，此时将display设置为inline，所以div区域变为普通的行级区域，不再换行，故效果如下：
3. 行内块级元素inline-block
inline-block就比较稀奇了，中文名称为行内-块级元素。
具体来说，inline-block元素在整体上是一个行级元素，前后并不会换行。但是在盒子内部，却表现为一个块级元素，所以长度、高度、边距等属性可以应用到该元素上。
例如：
<head> <meta charset="utf-8"> <style> .display-inline-block { display: inline-block; background-color: red; width: 100px; height: 20px; padding: 10px; } </style> </head> <body> <span>春眠不觉晓</span> <div class="display-inline-block">处处闻啼鸟</div> <span>夜来风雨声</span> <span>花落知多少</span> </body>
前后并不换行，但是在行内是作为一个块的，效果如下：
4. 不显示none
none比较简单了，设置为none后元素没有盒子了，所以元素不在页面中占据空间，也不再显示。例如：
<head> <meta charset="utf-8"> <style> .display-none { display: none; background-color: grey; } </style> </head> <body> <span>春眠不觉晓</span> <span class="display-none">处处闻啼鸟</span> <span>夜来风雨声</span> <span>花落知多少</span> </body>
效果如下：
5. 小结
display属性的作用是设定元素的盒子类型，也就是调整元素在网页上占据的空间类型。