【CSS】布局属性：display
拿到一张设计稿，最先想到的就是如何布局。
垂直布局？水平布局？悬浮？层叠样式？
今天我们来复习一下CSS原生的布局属性——display。
display
display:block;
块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。
.block {display: block}
<span class='block'>span元素1 block</span>
<span>span元素2</span>span元素默认是不换行的，加上block属性之后，有了换行效果。
display:inline;
行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。 不管你是什么控件，只要加上display:inline;样式就会自动变为同一个段落。
.inline {display: inline}
<p class='inline'>这是一个</p>
<p class='inline'>inline元素！</p>p元素默认是换行的，加上inline属性之后，变成了一行。
display:inline-block;
行内块元素(inline-block)：结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。
.inline-block {display: inline-block}
<div>
<span>span元素2</span>
<!-- inline-block -->
<p class='inline-block'>span元素3</p>
<span>span元素4</span>
</div>p元素默认是换行的，加上inline-block属性之后，变成了一行，并且可以设置宽高和边距。
display:none;
隐藏该元素。
display:inherit;
跟随父元素的display样式；父元素block它就block，父元素inline它就inline
.inline {display: inline}
.inherit {display: inherit}
<!-- inherit -->
<div class='inline'>父元素 inline元素
<div class='inherit'>子元素inherit元素</div>
<div>子元素不是inherit元素</div>
</div>div元素默认是换行的，因为父元素是inline，设置了inherit的子元素跟随父元素的属性inline，与父元素成为同一行。
其他display属性（不常用）;
值 | 描述 |
|---|---|
list-item | 此元素会作为列表显示 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示 |
compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除 |
marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除 |
table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符 |
inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符 |
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>） |
示例汇总：试一试
<html>
<head>
<style type="text/css">
.inline {display: inline}
.none {display: none}
.block {display: block}
.inline-block {display: inline-block}
.list-item {display: list-item}
.run-in {display: run-in}
.compact {display: compact}
.marker {display: marker}
.table {display: table}
.inline-table {display: inline-table}
.table-row-group {display: table-row-group}
.table-header-group {display: table-header-group}
.table-footer-group {display: table-footer-group}
.table-row {display: table-row}
.table-column-group {display: table-column-group}
.table-column {display: table-column}
.table-cell {display: table-cell}
.table-caption {display: table-caption}
.inherit {display: inherit}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<!-- inline -->
<p class='inline'>这是一个</p>
<p class='inline'>inline元素！</p>
<!-- none -->
<div class='none'>div 元素的内容不会显示出来！</div>
<div>
<!-- block -->
<span class='block'>span元素1 block</span>
<span>span元素2</span>
<!-- inline-block -->
<p class='inline-block'>span元素3</p>
<span>span元素4</span>
</div>
<br/>
<!-- inherit -->
<div class='inline'>父元素 inline元素
<div class='inherit'>子元素inherit元素</div>
<div>子元素不是inherit元素</div>
</div>
<br/>
<!-- list-item -->
<span>span元素0 非list-item</span>
<span class='list-item'>span元素1 list-item</span>
<span class='list-item'>span元素2 list-item</span>
<span>span元素3 非list-item</span>
<span>span元素4 非list-item</span>
</body>
</html>