简介

每一种元素都有默认的display属性，要么是block元素，要么是inline元素。像常见的div就是block元素

block

元素：<div>、<section>、<ul>、<p>、<h1>，默认情况下，如果没有设置宽度的话，它们会尽可能的拉伸

inline

元素：<span>、<em>、<b>、<a>，inline元素会忽略宽度和高度

inline-block

和inline元素唯一不同的是，它可以设置宽度和高度

run-in

Fire-Fox不支持

table values

div {
  display: table; /** 让元素表现的像`<table>`似的 **/
  display: table-cell; /** 让元素表现的像`<td>`似的 **/
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row; /** 让元素表现的像`<tr>`似的 **/
  display: table-caption;
}

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
</table>

如何使用：

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      Gross but sometimes useful.
    </div>
  </div>
</div>

list-item

让元素表现的像li似的

flex

CSS3中新添加的

参考1 参考2 参考4 参考3

display

简介