display 的值以及作用
常用的值
none
隐藏元素，不占据页面空间；visibility:hidden的元素，也是隐藏元素，但是会占据原来的页面空间。
inline
行内元素， 元素会在一行内显示，超出屏幕宽度自动换行，元素前后没有换行符，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
示例元素：span,b,i,a,u,sub,sup,strong,em
block
块级元素， 会独占一行，元素前后会带有换行符，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。
示例元素：div,h1-h6,ul,ol,dl,p
inline-block
行内块元素， 与行内元素一样可以再一行内显示，而且可以设置宽高，可以设置margin和padding。
示例元素：input,button,img
list-item
列表元素，作为列表显示。
示例元素：li
table
作为块级表格来显示(类似于<table>)，表格前后带有换行符。
inline-table
作为内联表格来显示(类似于<table>)，表格前后没有换行符。
flex
多栏多列布局,CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最新版本）
火狐可以直接使用，谷歌和欧朋需要在属性值前面加-webkit-前缀，比较适合移动端开发使用。
设置flex属性的元素会用伸缩容器减去有实际数值的元素的宽或者高，然后将差值按照flex设置的数值进行比例的分配。
inherit
继承，如果元素的某些属性没有进行设置，有些是会有默认值的，有些是会继承的。
从父元素继承 display 属性的值
不常用的值
run-in
根据上下文来决定将元素设置为块级元素或内联元素
compact
CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker
CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table-row-group
作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group
作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group
作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row
作为一个表格行显示（类似 <tr>）。
table-column-group
作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column
作为一个单元格列显示（类似 <col>）
table-cell
作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption
作为一个表格标题显示（类似 <caption>）
box
CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最老版本）
inline-box
CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最老版本）
flexbox
CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的过渡版本）
inline-flexbox
CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的过渡版本）
inline-flex
CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最新版本）
伸缩盒子（弹性盒子)
CSS3 中一种新的布局模式，引入伸缩盒子的目的是提供一种更加有效的方式来对页面中的元素进行排列、对齐和分配空间，当页面需要适应不同的屏幕大小以及设备类型时这种布局方式能够确保元素拥有恰当尺寸和位置。
一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。
display:flex; // 设置一个伸缩容器
flex-flow:row wrap;
/* 布局方式：
row:从左向右布局
column：从上到下布局
wrap：是否在一行显示，如果设置了此值，则伸缩项目会换行显示，如果没有设置此值，则不会换行显示
*/
行内元素与块级元素的区别：
嵌套
行内元素：行内元素只能嵌套行内元素，不能嵌套块级元素。
块级元素：块级元素可以嵌套行内元素，但是行内元素不可以嵌套块级元素。块级元素之间也可以进行嵌套，但是，并不是块级元素之间可以随意的嵌套。p元素是不能嵌套任何块级元素的，div可以嵌套任意的元素，但是div并不是能够被所有的块级元素嵌套的。
div可以嵌套div
td可以嵌套div
li可以嵌套div
dd，dt可以嵌套div
结构标记 可以嵌套div
margin和padding
行内元素：有margin和padding，但是只能够设置左右的值，设置上下的值是无效的。
块级元素：可以设置margin和padding上下左右的四个值，margin可以有负值，padding不允许有负值。
设置宽高
行内元素：不允许设置宽高，行内元素的宽高只能是由行内元素内的内容撑起来。
块级元素：允许设置宽高，如果不设置，默认宽度是父元素的100%，高度是由内容撑起来的。
