拿到一张设计稿，最先想到的就是如何布局。

垂直布局？水平布局？悬浮？层叠样式？

今天我们来复习一下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此元素会根据上下文作为块级元素或内联元素显示
compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
markerCSS 中有值 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>