Layout with CSS3(翻译)

本章包含：

。inline-block和table在css2上的显示效果。

。calc和box-sizing属性让css2布局更具可管理性。

。Media queries为不同设备定制不同的css样式。

。新的css3布局模块：

许多人对css1布局中贫乏的工具抱怨多年，这不是没有根据的批评，因为css1几乎没有布局工具，在设计师设计完成之前没人知道网页会呈现什么模样。在css2中加入了一些可选项，但在2009年的ie8出现前都没用得到广泛应用。因为css2推广速度很慢，所以css3的支持也启动很慢；但最近活动挺频繁。本章包含了css2的旧的没被广泛使用的特性和css3中的现在浏览器开始支持的新特性。

在网页布局上html5对table的贡献

W3C HTML工作组已经声称会坚持保留table的布局方式，得谢谢HTML5和ARIA，介绍了一个用于表示一个特定表的毫无意义的语义方法（仅用于布局）

<table role="presentation">

这并不表示你应该忽略所有好的实践方法并将你的css布局转换到table上，但它表明你可以将你的旧的网页在无需大的改动的情况下的变得更容易访问。

未充分使用的css2布局特性

css2有一些新的用于布局的特性-inline-block和table，table-row和table-cell值用于显示属性--但在现实网站中几乎未被使用过，因为大多数浏览器（IE6）对其并不支持（在市场份额方面）。在本节，我们将回顾这些未充分使用的css2的特性。

使用inline-block将元素放置在一行

inline-block是<block>元素和<inline>元素的折中。一个<block>元素可以定义宽度，高度，外边距和内边距并可以使得文本换行。一个<inline>元素可以使得文本放置在一行但没有宽度，高度等属性。一个inline-block元素将两者结合--可以将文本放在一行，并可以指定宽度，高度，内外边距。

这个简单的例子将演示如何使用inline-block进行布局。如果你检查从本章下载的代码，你就将发现示例的浮动布局，一个任何人都熟悉的使用css进行布局的方法。

< header >

  <h1>Heading</h1>

< /header >

< section >

  <p>I never am...</p>

< /section >

< aside>Side bar</aside > < footer>Footer</footer>

十年，一个和使用inline-block布局相似的方式要求你设置<section>和<aside>元素适当的宽度：

header,section, aside, footer {     margin:2%;     padding: 2%;     outline: 4px dashed black;     vertical-align: top;

}section, aside {     display:inline-block;     width: 54.5%; } aside{     margin-right: 0;     width: 28.5%; }

inline-block属性解决了若干个麻烦的浮动溢出的问题。使用inline-block浮动的第一个好处就是元素不会从正常的文本流溢出。这表明在基本的两列布局中，不必在意那列是最长的。任何一个full-width的元素将被自动压缩-要求没有clear设置。

inline-block同样可以将不同大小的元素保持一致。在inline-block规范下的元素将像普通文本一样进行正常的网格对齐。在这个截图中，你将看见超出大小的元素将文本自动换行。

注：翻译好辛苦，未完待续...