创建游戏板 我决定创建的游戏是我的最爱之一。 这是危险的，自1964年以来一直存在 而且仍然很强劲。 您在这里看到的是一个在线开发人员。 它称为CodePen IO。 还有你可以在这里做什么 正在测试一些代码 您将要使用的。 我所做的是创建了一个小的HTML文档 要打印出四列。 对于这种设计，对于本课程， 我们将深入研究这些能力 网格类。 而我们要做的是 组成一个在设计上具有响应性的游戏板， 而且对眼睛也很有吸引力 如您所见，在屏幕的左侧 在我的HTML文档中，我有一个简单的HTML 有一个班级， 我的程序只有一部分 分为四列， 我在那里有两个班，一个叫做网格班， 另一个叫做列类 我们将看看CSS的样式。 如果您在中间查看CSS代码窗口， 我们的身体有些基础 然后定义什么是网格类 如果您仔细观察红色圆圈， 您会看到我正在创建一个名为 网格模板列 我想要四列，每列占据25％的屏幕。 问题是当我想分隔这些列时 与所谓的网格差距。 如您所见，在第12行 我将网格间隙设置为10像素。 这给了我在每列之间的空间。 网格模板列和25％会发生什么 是它不包括列之间的间隙 并相应地创建一个水平滚动条， 我们从未想过的东西。 如果您在窗口的右侧看 通常为JavaScript保留 在这个特定的屏幕上，我们没有任何东西， 使用25％给我们一个水平滚动条 在第四列的底部。 而不是4％和25％， 我更改了网格模板列的设置方式。 我将25％更改为说我想使用小数 剩余空间。 而我们要做的是，我们将学习 确切的工作原理。 这个想法是它将计算 还剩多少空间 并调整列宽而不是25％， 它会降低到22％或23％ 以容纳间隙的宽度。 如您所见，这一分数是1fr 让我得到四列的整个宽度 并在页面宽度中包括空白。 让我们看看在游戏板上进行设计时的外观。 在这种情况下，我们的类别将全部与CSS有关， 以及我们将要进行的工作。 我们有美元价值 类似于"危险"拥有它们的方式。 我们将对该游戏进行编码以使其正常运行 就像《危险》一样。 为了使游戏板正常工作， 我们将要创建和使用 框大小属性。 我们想要做的是创建一个高度和宽度 我们要分配给这个盒子 并处理盒子里的东西。 边框和填充添加到宽度 给我们尺寸显示在屏幕上的盒子 我们必须调整该值。 同样，正如我所说，如果我们有四个25％的盒子， 任何右或左填充，它不能放在一行上 在那个盒子容器的约束之内。 所以我们要做的就是改变它， 而不是使用内容框， 这是默认版本， 我们想将其更改为border-box。 从而使浏览器进行计数 边界，填充，间隙宽度等 它将自动缩小文档的大小 这样就不会出现水平滚动。 使用边框可简化任何元素的使用 消除了问题 布置所有内容。 相对和绝对定位 允许这些值相对于内容 并且不受边框和填充的变化的影响。 所以我们总是要得到相等的列 无论我们做什么。 让我们看一下代码 生成此内容框和边框。 第一个，这个更大的盒子， 将我们的box-sizing属性设置为content-box。 该框的宽度为160像素，高度为80像素， 填充为20像素， 这将移动单词"内容框" 距边界20像素， 并且将具有八个像素的边框。 如果您进行一些数学运算，则该框的160像素 加上左右两套填充 加上左右两套边框 确实会给您一个216像素宽的盒子 高度也一样。 与其说内容框， 我们创建了一个名为border-box的类。 从整个盒子宽度中减去该填充 我们得到了一个更小的盒子。 为什么大不了？ 好吧，当用户使用不同类型的设备时 要访问页面，我们需要节省尽可能多的屏幕空间 尽可能地使用边框可以帮助我们做到这一点。
