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{width: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%，高度是由內容撐起來的。