CSS控制布局的属性display、 column属性创建多列

笔记

display

 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 

block

 或 

inline

 。一个
block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block

<div>

div

 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 

p

 、 

form

 和HTML5中的新元素： 

header

 、 

footer

 、 

section

 等等。
</div>

inline

span

 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 

a

 元素是最常用的行内元素，它可以被用作链接。

none

另一个常用的display值是 

none

 。一些特殊元素的默认 display 值是它，例如 

script

 。

display:none

 通常被
JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 

visibility

 属性不一样。把 

display

 设置成 

none

 元素不会占据它本来应该显示的空间，但是设置成 

visibility:
hidden;

 还会占据空间。

其他 display 值

还有很多的更有意思的 display 值，例如 

list-item

 和 

table

 。这里有一份详细的列表。之后我们会讨论到 

inline-block

 和 

flex

 。

额外加分点

就像我之前讨论过的，每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 

li

 元素修改成
inline，制作成水平菜单。
inline-block行内块元素

inline-block

你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 

float

 是一种选择，但是使用 

inline-block

 会更简单。让我们看下使用这两种方法的例子：

困难的方式（使用浮动）

.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}

<div class="box">
我在浮动！
</div>

<div class="box">
我在浮动！
</div>

<div class="box">
我在浮动！
</div>

<div class="box">
我在浮动！
</div>

<div class="box">
我在浮动！
</div>

<div class="box">
我在浮动！
</div>

<div class="box">
我在浮动！
</div>

<div class="box">
我在浮动！
</div>

<div class="box">
我在浮动！
</div>

<div class="box">
我在浮动！
</div>

<div class="box">
我在浮动！
</div>
<div class="after-box">
我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。
</div>

容易的方式（使用 inline-block）

你可以用 

display

 属性的值 

inline-block

 来实现相同效果。

.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}

<div class="box2">
我是一个行内块！
</div>

<div class="box2">
我是一个行内块！
</div>

<div class="box2">
我是一个行内块！
</div>

<div class="box2">
我是一个行内块！
</div>

<div class="box2">
我是一个行内块！
</div>

<div class="box2">
我是一个行内块！
</div>

<div class="box2">
我是一个行内块！
</div>

<div class="box2">
我是一个行内块！
</div>

<div class="box2">
我是一个行内块！
</div>

<div class="box2">
我是一个行内块！
</div>
<div>
这次我可没有用 

clear

 。太棒了！
</div>

你得做些额外工作来让IE6和IE7支持 

inline-block

 。有些时候人们谈到 

inline-block

 会触发叫做 

hasLayout

 的东西，你只需要知道那是用来支持旧浏览器的。如果你对此很感兴趣，可以在前面那个链接中找到更详细的信息。

inline-block 布局

你可以使用 

inline-block

 来布局。有一些事情需要你牢记：

vertical-align

 属性会影响到 

inline-block

 元素，你可能会把它的值设置为 

top

 。
你需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

nav {
display: inline-block;
vertical-align: top;
width: 25%;
}
.column {
display: inline-block;
vertical-align: top;
width: 75%;
}

<div class="container"><nav>
Home
Taco Menu
Draft List
Hours
Directions
Contact
</nav>

<div class="column"><section>
Tada!
</section><section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,
ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper
ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section></div>

column

这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：

.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce
luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>

CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。还有许多和 column 相关的属性，点击这里了解更多。

多列属性（Multi-column）

属性	描述	CSS
column-count	规定元素应该被分隔的列数。	3
column-fill	规定如何填充列。	3
column-gap	规定列之间的间隔。	3
column-rule	设置所有 column-rule-* 属性的简写属性。	3
column-rule-color	规定列之间规则的颜色。	3
column-rule-style	规定列之间规则的样式。	3
column-rule-width	规定列之间规则的宽度。	3
column-span	规定元素应该横跨的列数。	3
column-width	规定列的宽度。	3
columns	规定设置 column-width 和 column-count 的简写属性。	3