display是css中最常见的一个控制布局属性，每个元素都有一个默认值，常见的默认值为block和inline。block表示块级元素，inline表示行内元素。
在移动端的开发中，display尤为重要，选择最适合的display值，可以简化很多代码。下面就来探索一下display中那些神奇的用法。
block
div是一个标准的块级元素，一个块级元素会新开始一行并且尽可能撑满容器。其他块级元素包括p、form和html5中的新元素：header、footer、section等。
inline
span是一个标准的行内元素。行内元素可以在段落中包裹一些文字而不打乱原先的布局。常见的行内元素有：a
none
none也是常用的display值，一些特殊元素的默认display值就是它，例如script。它通常被javascript用来在不删除元素的情况下显示或隐藏元素。
它和visibility属性不一样。把display设置成none不会保留元素本该显示的空间，但是visibility:hidden;还会保留。
table
display:table;可以使元素按table样式渲染
table元素在html中是一个包含语义的标签：它描述什么是数据。
而display:table属性值只是声明了某些元素在浏览器中的样式，不包含语义。
display:table;布局有一个超强特性：缺少的表格元素会被浏览器以匿名方式创建。
例如：我们为元素使用display:table-cell;而不将其父容器设置为display:table-row;浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。
table属性下一些常见属性
1.table-row：使该元素按tr样式渲染
2.table-cell ：使该元素按td样式渲染
3.table-row-group ：使该元素按tbody样式渲染
4.table-header-group ：使该元素按thead样式渲染
5.table-footer-group ：使该元素按tfoot样式渲染
6.table-caption ：使该元素按caption样式渲染
7.table-column ：使该元素按col样式渲染
8.table-column-group ：使该元素按colgroup样式渲染
其他有用的表格属性
table-layout(?):将该属性值设置为fixed可以让浏览器按照固定算法来渲染单元格的宽度。
border-collapse ：定义你的table布局元素之间使用何种形式的边框，是共用边框（值为collapse）还是使用各自独立的边框（值为separate）。
border-spacing：使用了“border-collapse:separate“，那么可以使用border-spacing属性来定义相邻两个单元格边框间的距离。table-cell会被其他一些css属性破坏，例如float和position:absolute,所以
display:table-cell与float:left或position:absolute属性最好不要同时使用。设置了该属性的元素对宽度高度敏感，响应padding属性，对margin值无效。
用法：
1.使用display:table-cell与大小不固定元素的垂直居中。
2.display:table-cell与两栏自适应布局
3.display:table-cell列表布局
以上原文链接：http://www.frontopen.com/331.html
flexbox布局
flex有三个版本，分别对应于display:box; display:flexbox; display:flex
flexbox规范时间表：
- 2009年7月 工作草案 (display: box;)
- 2011年3月 工作草案 (display: flexbox;)
- 2011年11月 工作草案 (display: flexbox;)
- 2012年3月 工作草案 (display: flexbox;)
- 2012年6月 工作草案 (display: flex;)
- 2012年9月 候选推荐 (display: flex;)
关于flexbox的使用，将在下一篇文章中解读。