如何创建像素完美的布局模型

创建网站需要参考某种设计方案。它可能存在于我们的脑海中，也可能存在于模型或设计工具中。作为开发者，我们的目标是将这份蓝图高效地转化为 HTML/CSS，同时兼顾响应式和可访问性。这并非易事，因为布局代码的编写方式多种多样。实现响应式、像素级完美网站的一种方法是创建一个布局模型，将网站元素划分为区块、块和元素。

本系列文章分为三部分。第一部分将重点介绍如何创建布局模型；第二部分介绍什么是语义 HTML 及其优势；最后一部分介绍如何使用语义 HTML 和 CSS 创建布局。

不用多说，我们开始吧！

定义

在将任何设计转化为代码之前，我都会先将页面划分为部分、块和元素。我将其定义为：

• 元素。指构成一个单元的一个或多个标签。通常指文本、图标、链接或图像。
• 块。是包含一个或多个元素或块的容器。它缺乏逻辑含义。其主要目的是通过 CSS 属性（例如flex和）来组织元素grid。其主要 HTML 标签是div。
• 区块。区块是包含一个或多个区块的容器，具有逻辑含义。许多 HTML 元素可以表示区块，例如section、article或header。

我们将分析什么

让我们看看下一个设计。感谢Bakhtiyar Sattarov。

在我们开始创建模型之前，请考虑到我们创建布局的主要目标是

尽可能高效地布局区块、区块和元素。数量不一定要最少，但必须能够提供无缝响应和无障碍的解决方案。

创建布局模型

创建模型时，我喜欢先确定各个部分。一个简单的方法是根据其在网站中的逻辑含义进行排序。在本例中，我们可以看到有些项目可以引导用户进入网站内的其他路径，也就是导航栏。另一方面，还有一个英雄页面，因为它是网站的主要吸引力。它引导用户继续探索并阅读我们的内容。因此，我们有两个部分：导航栏和英雄页面。

定义好区块后，我们接下来要识别区块所包含的块。为此，我们首先要区分其元素。

识别元素非常简单，因为我们必须寻找任何像文本、图标、徽标、标签或图像这样的单元。

现在我们已经确定了元素，剩下的就是定义块。块的识别是通过确定我所说的 CSS 用途，或者说它们如何组织一组元素来实现的。这种组织方式可以分为三种：flex、grid或unnatural。

弹性块

Flex 布局是最简单、最常用的布局方式。它以二维方式排列对象，可以是列，也可以是行。同样，元素可以居中，并设置一些统一的间距，例如 space-between 和 space-around。了解更多关于flexbox 的信息。

提示：当您看到一组元素彼此之间有空间并且它们位于同一列或同一行中时，请将其视为可以使用弹性的块。

网格块

网格布局理解起来非常简单，但实现起来却很困难。它像矩阵一样以三维方式排列对象。这种布局尤其适合用于画廊。请注意，你可以在网格和弹性布局中实现相同的布局，但最终会导致浏览器兼容性较差，并且有时更难实现。

提示：当您看到一组以矩阵形式组织的项目时，请考虑使用网格。

不自然的块

最后，非自然块类型是指使用绝对、粘性或固定定位的项目。通常，它会锚定到节中（将相对位置赋予节标签）。通过观察它们尴尬但完美的位置，很容易就能发现它们。

整合起来

现在，我们有了这些信息，我们就可以开始识别每个块了。

就是这样！一旦我们像这样构建了页面元素，您就可以轻松地将其转换为语义HTML，然后再转换为CSS。

结论

当我们想要创建一个可访问且响应迅速的网站时，创建模型非常重要。它允许开发人员轻松地将任何设计转换为 HTML 和 CSS。

这项技术乍一看可能有点吓人，但随着时间的推移，你将能够在脑海中快速构建这些模型。就像在纸上叠积木一样。

你觉得这个技巧怎么样？请在下方留言。第二部分再见👍💻

你知道我有一份新闻通讯吗？📬

如果您想在我发布新博客文章时收到通知并获得精彩的每周资源以保持领先地位，请访问https://jfelix.info/newsletter。