思维定式

封面照片由Guillaume Bolduc拍摄，来自Unsplash。

介绍

当你浏览一个网站时，你可能会被它的布局或其他方面深深震撼。如果是前者，你可能会想：他们是怎么做到的？如果是后者，你可能会想：我也能做得更好。

无论情况如何，你都可能打开代码编辑器，试图重新创建网站的布局。除非你拥有丰富的网站设计经验，否则你可能会遇到各种问题，并花费大量时间在搜索引擎上寻找解决方案。

如果你能建立网站布局的思维模型，就能节省在搜索引擎上花费的时间。一旦你熟悉了这个模型，当你着手创建任何你找到的布局时，你都会充满信心。我把这个思维模型称为“盒子思维”。

你可能会问：为什么要用方框来思考？那是因为网页上的所有东西都是方框，你可以根据需要移动它们。

请看下图。我已将谷歌首页上的所有网页元素高亮显示，它们看起来都像一个个方框！

我感觉你脑海里又冒出了另一个问题：为什么它们是盒子而不是其他形状？

让我们一探究竟。

当我选中谷歌首页时，你会注意到我使用了边框，而且所有边框都是绿色的。这个颜色是我通过开发者工具添加到网页中的CSS样式，添加后所有元素都显示为“方框”。

它们之所以显示为方框，是因为在 CSS 中所有 HTML 元素都可以被视为盒子。什么？这从何而来？答案很简单：CSS 盒模型。

CSS盒模型

CSS盒模型是围绕网页元素的盒子，它由以下属性构成：

• 利润
• 填充
• 边界
• 内容

利润

这是盒子外面的区域。

填充

内容周围的区域。

边界

边框环绕着填充和内容。

内容

盒子里装的是什么？

关于 CSS 盒模型的更多信息，我写过一篇文章。

可以通过操作这些属性将所需的网页元素移动到网页上的另一个位置，因为我认为网页元素只是盒子。

下面我使用属性将“Google”移动到了搜索框margin下方，如高亮部分所示，它只是一个方框。

我们把标志移到左边怎么样？这很简单！

你可以移动任何网页元素，因为它是一个盒子。但是等等，我确定吗？不。为什么呢？

如果您打算移动网页元素，它必须是块级元素。那么如果它是行内元素（例如 `<div>`）呢span？您可以使用 CSSdisplay属性 `style` 将其转换为块级元素，并将 `style` 属性的值设置为 `true`，block然后就可以移动它了。

除了上述方法外，您还可以使用其他属性margin来移动网页元素。这些属性包括：

• transform
• position

使用本产品时，transform您可以执行以下操作：

• 旋转盒子
• 沿X轴和Y轴移动盒子
• 缩放盒子
• 歪斜的盒子

下图是我在Unsplash上的一个个人资料页面，我在该页面上应用了该transform属性，并将其值设置为translateX(5%)黑色边框。

该position属性可用于将“框”移动到网页上的几乎任何位置。

在下面的图片中，所有方框都使用属性position和偏移属性进行移动top，即bottom，，，right。left

如何考虑布局

下次你看到网页布局时，不妨把它想象成一个巨大的盒子，也就是根html元素，里面排列着许多小盒子（从 `<div>`body标签开始）。你可以随意重新排列这些盒子。

下次开始一个 Web 项目时，请记住这一点：它只是一个巨大的盒子，我可以按照我想要的方式排列其中的盒子，并且可以使用 CSS 或 JavaScript 来操纵盒子的行为。

附注

如果您想像我处理 Unsplash 和 Google 图片那样，给整个网页元素添加边框，请执行以下步骤：

1. 打开网页。
2. 右键单击页面上的任意元素，然后选择“检查元素”，这将打开开发者工具。
3. 在“规则”选项卡下，点击“+”号即可向页面添加新的 CSS 代码，如下图所示。

如果您使用的是 Chrome 浏览器，则此设置位于“样式”选项卡下。

1. 然后，您可以使用通用选择器 *将样式应用于所有元素。示例

/**
 * This will apply a black border around every
 * element on the Web page.
 */
* {
    border: 2px solid #1a1a1a;
}

结论

在 CSS 中，HTML 元素相当于盒子，你可以移动它们。当你将它们排列成某种图案时，就叫做布局。当你为布局添加颜色和动画时，就变成了网页设计。