display的取值有很多种，下面列出比较常用的几种取值，还有其它的少用的值没有列出来：
1、none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的地方，设置visibility:hidden的元素，不会被显示，但是还是会占据原来的页面空间。
2、inline 行内元素 元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
示例元素：span,b,i,a,u,sub,sup,strong,em
3、block 块级元素 会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。
示例元素：div,h1-h6,ul,ol,dl,p
4、inline-block 行内块元素 与行内元素一样可以再一行内显示，而且可以设置宽高，可以设置margin和padding。
示例元素：input,button,img
5、list-item 列表元素
示例元素：li
6、table 会作为块级表格来显示(类似于<table>)，表格前后带有换行符。
7、inline-table 会作为内联表格来显示(类似于<table>)，表格前后没有换行符。
8、flex 多栏多列布局，火狐可以直接使用，谷歌和欧朋需要在属性值前面加-webkit-前缀，比较适合移动端开发使用。
一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。
伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。
HTML代码：
<div class='container'>
<div class='left'>左</div>
<div class='center'>中</div>
<div class='right'>右</div>
</div>
CSS代码：
.container{
display:flex; // 设置一个伸缩容器
flex-flow:row wrap /*布局方式,row:从左向右布局，column：从上到下布局，wrap：是否在一行显示，如果设置了此值，则伸缩项目会换行显示，如果没有设置此值，则不会换行显示*/
}
.left{500px;}
.center{flex:1;}
.right{flex:2;}
设置flex属性的元素会用伸缩容器减去有实际数值的元素的宽或者高，然后将差值按照flex设置的数值进行比例的分配。
9、inherit 继承，如果元素的某些属性没有进行设置，有些是会有默认值的，有些是会继承的。
行内元素与块级元素的区别：
1、嵌套
行内元素：行内元素只能嵌套行内元素，不能嵌套块级元素。
块级元素：块级元素可以嵌套行内元素，但是行内元素不可以嵌套块级元素。块级元素之间也可以进行嵌套，但是，并不是块级元素之间可以随意的嵌套。p元素是不能嵌套任何块级元素的，div可以嵌套任意的元素，但是div并不是能够被所有的块级元素嵌套的。
div可以嵌套div
td可以嵌套div
li可以嵌套div
dd，dt可以嵌套div
结构标记 可以嵌套div
2、margin和padding
行内元素：有margin和padding，但是只能够设置左右的值，设置上下的值是无效的。
块级元素：可以设置margin和padding上下左右的四个值，margin可以有负值，padding不允许有负值。
3、设置宽高
行内元素：不允许设置宽高，行内元素的宽高只能是由行内元素内的内容撑起来。
块级元素：允许设置宽高，如果不设置，默认宽度是父元素的100%，高度是由内容撑起来的。