css圣杯布局与双飞翼布局_是了解CSS布局的好时机-CSDN博客

css圣杯布局与双飞翼布局

I’ve been building a set of common UI patterns for my CSS Grid resource site, Grid by Example. These use CSS Grid Layout but include legacy layout in order that older browsers get some layout - even if not the full design that is implemented with Grid.

我已经为CSS Grid资源站点Grid by Example构建了一组常见的UI模式。它们使用CSS Grid Layout，但包含旧版布局，以便较旧的浏览器获得某些布局-即使不是使用Grid实现的完整设计。

Something that is apparent when doing this is how little we actually need to override. When items become grid items, much of their previous behaviour is removed. A floated, display: inline-block, display: table, or flex item all become grid items and lose the behaviour that comes with these layout types. This is as defined in the specification, and you can see some examples in this cheatsheet.

这样做时显而易见的是，我们实际上需要重写的东西很少。当项目变为网格项目时，它们以前的许多行为都将被删除。浮动的display: inline-block ， display: table或flex项都变为网格项，并且失去了这些布局类型附带的行为。这是在规范中定义的，您可以在此备忘单中看到一些示例。

We also have Feature Queries. These help us out in the instances where we do need to actually fork our code, do one thing for grid and another for other browsers. By wrapping grid code in a Feature Query we ensure that it cannot be run by those older browsers. I find that the majority of CSS inside feature queries is resetting widths used to make legacy methods act like they were using a grid.

我们也有功能查询。这些可以帮助我们在确实需要分叉代码，为网格做一件事，为其他浏览器做另一件事的情况下提供帮助。通过将网格代码包装在功能查询中，我们确保它们不能由那些较旧的浏览器运行。我发现功能查询中的大多数CSS都是重置宽度，这些宽度用于使遗留方法像使用网格一样起作用。

To be able to take advantage of the things grid enables, that simply are not possible with older layout methods, you need to be able to bridge the gap between supporting and non-supporting browsers. Doing so in a way that creates a good experience for all users. You need to understand how the cascade allows you to overwrite one property with another. You need to know how floats work, why a ‘clearfix’ does what it does. You need to learn what a Block Formatting Context is, and when creating one is useful. Becoming someone who understands CSS, rather than someone who just uses CSS, will give you a huge advantage in your work.

为了能够利用网格支持的功能，这是旧版布局方法无法实现的，您需要能够弥合支持浏览器和不支持浏览器之间的差距。这样做可以为所有用户创造良好的体验。您需要了解级联如何允许您用另一个属性覆盖一个属性。您需要知道浮点数如何工作，为什么“ clearfix”会执行它的工作。您需要了解什么是块格式化上下文，并且在创建块上下文时会很有用。成为了解 CSS的人，而不是仅仅使用 CSS的人，将为您带来巨大的工作优势。

It is for this reason that my upcoming book for A Book Apart will explain these layout methods alongside all the new shiny. Really explain them, and why they exist. I also spend time in my CSS Layout Workshop detailing each method, what it is designed for and how we have been using for layout. If you don’t want to give me money to explain these things to you, you can find information about CSS Layout in several places. I’d recommend the MDN CSS documentation as an excellent place to start.

出于这个原因，我即将出版的《 A Book Apart》一书将解释这些布局方法以及所有新的亮点。真正解释它们，以及它们为什么存在。我还在CSS Layout Workshop中花了一些时间，详细介绍了每种方法，它的设计目的以及我们如何使用它进行布局。如果您不想给我钱向您解释这些事情，可以在几个地方找到有关CSS布局的信息。我建议将MDN CSS文档作为一个很好的起点。

However you learn, do learn. As I pointed out at An Event Apart Boston, the methods we have been trying to use for layout aren’t going away. You will still use them as part of the whole new layout system we now have for the web. They are also key in being able to provide elegant fallbacks for your grid and flexbox based designs. By learning, you won’t be waiting around for your framework of choice to implement grid-based grid that includes fallbacks, or for me to create more patterns. You will be able to do that for yourself in a way that suits your audience, rather than outsourcing those decisions to someone else.

无论您学习了，还是要学习。正如我在“波士顿活动除夕”中指出的那样，我们一直在尝试用于布局的方法并没有消失。您仍然将它们用作我们现在用于网络的整个新版式系统的一部分。它们对于能够为基于网格和Flexbox的设计提供优雅的后备功能也是至关重要的。通过学习，您将不会等待选择的框架来实现包含回退的基于网格的网格，也不会等待我创建更多模式。您将能够以适合自己的受众的方式自己做到这一点，而不是将那些决定外包给其他人。