学习CSS布局

"display"属性

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，制作成水平菜单。

原文地址： http://zh.learnlayout.com/display.html