[W3Conf] Eric Meyer: “有意布局的时代”

在最初……Tim 说“让标记存在”。然后，Tim 将结构与外观分开。这是网络的一个基本特征。

Mozilla Netscape 在参与网络并扩展 HTML（1994 年）时，所做的第一件事就是扩展其表示能力。立即打破了内容和设计之间的清晰分离。

“有一段时间，一直都是表格。Spacer GIFs 和所有。是的，我用硬 G 说 GIF。处理它。”

笑话！

为什么网页设计师离开餐厅？他受不了表格布局！— @meyerweb #w3conf

— Christine Bower (@chrisbean) 2013 年 2 月 22 日

随着 IE 5 的发布，我们进入了 CSS 时代。

CSS1 是一份非常短的文档。您可以在一个晚上读完它。它根本没有布局能力。好吧，它有浮动。但它不是为布局而设计的，它只是为了将文本环绕图像（以模拟 IE 中的 align 属性）。

用于布局的浮动很危险。例如，“浮动下降” - 这不利于布局。同样，“浮动包含”很奇怪，并且直到今天仍然是一个问题。浮动有 clear，这使得它们真正有用于定位。

第一个使用定位进行布局的主要网站是 Doug Bowman 的 Wired.com。他做出的设计决定是由技术强加的。

今天我们仍然使用浮动进行布局。这是一个技巧，而且一直都是技巧。公平地说，表格也是一个技巧。它们不是为它设计的，但它是我们需要的最接近的东西。

---

vw/vh 单位分别代表视窗宽度的 1/100 或视窗高度的 1/100。我们可以用它们设置宽度和高度，将它们与页面上的可用空间相关联。类似于百分比，但始终与视窗相关，而不是父元素。它不只是用于长度，它也可以用于 font-size，将排版直接与视窗相关联。

Flexbox 是一种专门为布局设计的布局系统。它也有 一个 polyfill。注意：它只适用于旧语法，不适用于新语法，并且 polyfill 对于新语法还没有完全到位。您可以使用 flexbox 相关的属性（如 justify-content）获得很多控制权。

圣杯布局 使用带巨大负边距和正填充的疯狂“反常”方法创建了标题/页脚/主体/左侧/右侧布局。它很复杂也很奇怪，但它起作用了。不过，很难进行更改（例如，固定-流体-固定而不是流体-固定-流体）。

Flexbox 使得“圣杯”般的布局变得微不足道。更不用说：源代码顺序无关紧要。使主体内容排在首位仅仅是更改 order 的问题。

关闭 flexbox（display: block 而不是 display: flex）将把所有子元素变成普通块，并再次在彼此之上布局。这使得单列（可能是移动设备）布局变得容易。但请记住，要考虑源代码顺序。

默认情况下，Flexbox 中的元素高度相同，但它们不一定是相同的。您可以将它们沿着顶部（flex-start）、底部（flex-end）、中心或基线对齐。没错：CSS 中的垂直居中（有点）。您可以使所有 flexbox 遵循这些规则，或者在每个 flexbox 基础上进行混合和匹配。

将所有这些与内容对齐结合起来，您将获得一些非常强大的布局可能性。注意：我的文章 介绍了如何将旧语法和新语法结合使用以实现 flexbox。

网格是另一个即将推出的新布局系统。您定义网格线，然后基本上将内容挂在网格线上。“将此从该网格线布局到另一个网格线。”

网格和 flexbox 不是互斥的。一个网格（单元格？）可以是 flex 父元素。网格中可以包含另一个网格。flexbox 中可能包含一个网格。Yo dawg，我听说你喜欢网格中的网格... 您懂的。

在网格中，有新的 fr（分数）单位。它们代表网格布局中剩余的空间。语法很奇怪。多个值，其中一个将“胜出”。

CSS 区域 与布局相关。您仍然需要使用实际的布局技术，但在区域中，您可以控制内容从一个元素流向另一个元素的方式。注意：在 CodePen 上进行区域玩法的竞赛 正在进行。

“二十年的布局技巧即将结束。也许不是明天，但很快，在我们余生中。”

---

这是会议的最后一个演讲。我认为这种情绪很好。

所以，不要变得太感性或什么的，但整个会议让我再次爱上了网络开发。谢谢孩子们。 #w3conf

— Jordan Pagels (@designerjordan) 2013 年 2 月 23 日