display，元素的转换

display：值

none 不显示任何框，并且不占位置，可用来隐藏元素

inline

1. width height margin 都不起作用，只有padding 起作用，但是padding也属于脱标，不占位置，并且层级比其他元素高，
2. 因为脱标，有时候给行内元素设置padding 时，若超出了浏览器的窗口，则看似不起作用。

block

块级元素，独占一行，盒子模型的高宽都会生效

inline-block

3. 不独占一行的行内块元素，拥有并排特性，可设置盒子模型中的宽高。
4. 若不设置宽高，则行内块元素的宽高由内容决定，
5. 当inline-block 碰到同类的inline-block，或者inline元素时，line-height ,margin-top margin-bottom padding-top padding-bottom 会一起用，如果两个元素都设置了这些属性，则谁的属性大就使用谁的值！（碰到的意思是这些元素属于兄弟元素）

行内和块的问题：

inline 和inline-block 会因为html之间的换行变成空格（运用一些框架搭建的项目没有此中问题），有几像素的间距，如果遇到这个问题，怎样删除空格：

1. 直接删除html之间的空格
2. 将空格代码中加入注释
3. 设置margin-left 为负值
4. 给父元素添加font-size：0
   5.给父元素添加letter-spacing： 负值；然后通过子元素清楚letter-spacing：0；例如 body {letter-spacing:-3px} body * { letter-spacing:0;}

table…的各种属性

使用此属性，可以很轻松的实现水平居中，–> display: table-cell;使用此属性的元素会像表格一样可以使用vertical-align这个属性，从而实现垂直居中，然后可以通过margin： 0 auto；实现水平居中，
其他的表格属性用的时候可以深入研究！

list-item

可以使用list的一些属性，

flex

另一篇文章中有所探究，