小编Mag*_*nus的帖子

我一直在阅读CSS Tricks 上的CSS 网格教程，但一个基本方面让我有点困惑。

似乎有两种方法可以确定网格项跨越多少个单元格：

1. grid-template-areagrid-area使用为具有属性的网格项指定的名称
2. 使用grid-column-start/end和grid-row-start/end

看看下面的测试代码，似乎 的大小grid items是按以下顺序决定的（其中左侧的值覆盖右侧的值）：

grid-row/column-start/end>>grid-template-area物品本身的尺寸

问题

1. 我的上述顺序通常是正确的吗？
2. 是否有指定大小grid items（即它们跨越多少个单元格）的首选方法（上面的 1 或 2）？

代码

.container {
  display: grid;
  border: 1px solid green;
  grid-template-columns: 120px 120px 120px;
  grid-template-rows: 120px 120px 120px;
  grid-template-areas: "item-1 item-1 item-2" "item-3 item-4 item-4" "item-5 item-6 .";
}

.item-1 {
  border: 1px solid blue !important;
  grid-area: item-1;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
}

.item-2 { …

从React Hooks FAQ 中，我们了解到钩子可以替代返回/渲染单个组件的 HOC 和渲染道具。

我试图更好地理解这一点，以及为什么这是事实。

我们先来看看 HOC：

HOC 是一个函数，它将一个组件作为参数，将它包装在周围的逻辑中，如效果和状态，并返回一个新组件。自定义钩子究竟如何取代它？我们仍然需要用其他逻辑包装输入函数的函数。

查看渲染道具：

渲染道具是我们作为道具传递给另一个组件的组件，然后使用一些新的道具渲染传递的组件。我想我们可以通过创建一个返回完整组件的自定义钩子来替换它，然后在任何需要的组件中使用该钩子。因此，父级不必将组件作为道具传递给它的子级。这就是钩子会取代渲染道具的方式吗？

对钩子如何在最常见的用例中替换 HOC 和渲染道具的解释，最好是代码示例，将不胜感激。

我对MDN对同源策略的描述有些挣扎。

他们指出：

通常允许跨域写入。

通常允许跨域嵌入。

跨域读取通常不会允许...

我了解第二个项目符号允许将跨域内容（例如CDN中的内容）标准嵌入到站点中：

• <script src="...">
• <link rel="stylesheet" href="...">

但是，何谓允许写入， 读不准？“写”是指我的网站写到另一个网站，还是相反的方向？与“阅读”相同，他们在说什么方向？一些例子将不胜感激。

我设置了一个最小的 Gatsby 页面来测试 Gatsby 何时重新渲染，我发现只需单击常规的路由内（哈希）锚链接，就会导致重新渲染。

这是为什么？有什么办法可以防止吗？

这是一个示例页面：

const SomePage = props => {
  console.log('RE-RENDERING PAGE');
  return (
    <>
      <a href="#foo">Link that should not fire re-render</a>;
    </>
  );
};

我对 JavaScript 中的作用域和闭包的概念有很好的理解。

此外，以下站点提供了如何实现 JavaScript 命名空间的示例：

1. 你想知道的关于 JavaScript 作用域的一切
2. JavaScript 中的命名空间

我仍然不明白的是，似乎有多少人混淆了作用域和命名空间的概念。此外，同样的人还经常提到如何不“污染全局命名空间”而不是“在全局范围内创建全局变量/变量”。

问题

• 作用域和命名空间是两个完全不同的概念，这不正确吗？
  • 命名空间：代码分组，使得组内的名称是唯一的，并且不会与其他命名空间中的相似名称发生冲突
  • 范围：定义变量的可访问性。JavaScript 有两个作用域，全局作用域和局部/函数作用域（ES 2015 引入了带let/ 的块作用域const）
• 下面的对象字面量创建了一个新的命名空间是否正确，以bar避免污染全局命名空间（除了foo），但它bar仍然在全局范围内：var foo = { bar: 42 }
• 说“不要创建全局变量以免污染全局命名空间”是不是错了？全局变量 vs 局部变量（作用域）不同于命名空间。正如所见，完全有可能在一个新的命名空间中屏蔽一个变量，并且仍然让它在全局范围内。
• 如果避免污染全局命名空间是我们不应该创建全局变量的唯一原因，那么仅仅创建新的命名空间并仍然保持全局性还不够吗？

很抱歉打败了一匹死马，但我一生都无法理解为什么下面的方法不起作用。

• 放 line-height: 50px
• 放 vertical-align: top
• 我的理解，这应该使线箱50像素高的，然后vertical-align应该根据MDN，能够左右移动内联元素里面。

具体来说：

以下值相对于整行垂直对齐元素：

底部

将元素及其后代的底部与整行的底部对齐。

我试过这两个：

<span style="line-height: 50px; border: 1px solid red; vertical-align: bottom">Some text</span>

和这个：

<div style="line-height: 50px; border: 1px solid yellow">
   <span style="border: 1px solid red; vertical-align: bottom">Some text</span>
</div>

这是我希望将跨度定位在底部的最后一个版本。它说 line-box 应该是 50px，然后vertical-align用于 child span。

PS：请不要只说“使用 flexbox”或类似的。我想了解内部工作原理/从概念上讲为什么上面没有将跨度定位在行的底部。

我正在使用 SCSS 并想在顶部指定一个基于 px 和 rem 值之和的变量。

我知道不可能在 SCSS 变量中组合单位类型，所以我使用calc()：

$navbar-top: calc(40px + 1 rem);

在样式表的更下方，我想包含一个否定版本的$navbar-top.

我尝试了这两个，但没有成功：

(-$navbar-top)
-#{$navbar-top}

知道如何否定 SCSS 变量，而不必声明新变量，或在整个 CSS 中再次编写 calc 。

谢谢。

编辑

• 正如下面的评论中所指出的，这不是Sass 负变量值的重复吗？
• 这个问题是关于用 calc() 否定一个变量集，这与上面的 SO 帖子无关。我已经注意到上面那个问题中提出的两种解决方案。在这种特殊情况下，它们都不起作用。

编辑 2：基于下面 TEMANI 的回答的 SCSS 解决方案

在顶部声明必要的变量，包括“否定”（-1）：

$navbar-top: calc(40px + 1rem);
$neg: -1;

然后，该变量可以在整个过程中使用（否定或不否定），如下所示：

/* Non-negated */
margin: $navbar-top 0 0;

/* Negated */
margin: calc(#{$neg} * #{$navbar-top}) 0 0;

上面的否定版本将编译为以下 CSS：

margin: calc(-1 * calc(40px + 1rem)) …

阅读ECMAScript 规范，似乎环境记录（词法环境的组件）和引用都用于确定 anIdentifier绑定到哪个变量/函数。换句话说，找到 Identifier 所代表的实际值。

我注意到 aReference的Base value组件可以包含Environment Record：

基值组件可以是未定义的、对象、布尔值、字符串、符号、数字或环境记录。

但是，我不清楚何时使用 aReference而不是直接读取Environment Record当前的执行上下文（由s组件Lexical Environment给出）。running execution contextLexicalEnvironment

编辑：

在接受@Bergi的回答后，我想添加一些我不明白的事情，以防它对未来的读者有所帮助：

1. ECMAScript 中的标识符查找始终返回Reference类型
   • 要解析变量/函数名称，我们从8.3.2 ResolveBinding开始
   • 您将看到首先检查了running execution context's LexicalEnvironment（其环境记录）
   • 如果未找到匹配项，则向外跟踪词法环境链，直到找到匹配项（或未找到匹配项）
   • 链的末端为global environment，其外部环境为null
   • 一旦找到匹配项，Reference就会返回一个类型，该类型的base value值设置为匹配的环境记录中的名称值
   • 如果未找到匹配项，则返回Reference带有base valueof的 aundefined
   • 因此，标识符查找总是需要检查环境记录并Reference在最后返回类型 …

CSS2.1第10.6.1节规定：

内容区域的高度应基于字体，但是此规范未指定。UA可以例如使用em-box或字体的最大升序和降序。

内联不可替换框的垂直填充，边框和边距从内容区域的顶部和底部开始，与“ line-height”无关。

然后，在10.8行高计算中遵循似乎矛盾的语句：

线框的高度确定如下：

1. 计算行框中每个行内框的高度。对于嵌入式盒，这是它们的“行高” ...。

和：

用户代理必须通过其相关基准使未替换的嵌入式框中的字形彼此对齐。

内联框的高度将所有字形及其两边的前导部分包围起来，因此正好是“行高”

在这里，我有些不完全了解。

内联级别框的高度等于line-height它们上设置的属性（最小是line-height在父块容器元素上设置的属性），还是仅由字体高度（和UA实现）确定？

编辑

只是为了避免造成混淆（因为有很多与此相关的帖子）：

• 我知道一个inline-level element的内容高度等于它包含的字体（以及UA实现）
• 我意识到规范确实指出10.6.1，但10.8.1其中指出的高度inline-level box等于的高度line-height
• 这似乎与我矛盾
• 我在这篇文章中的目的是讨论规范中的措辞，以便充分理解其含义以及它与现实的联系

编辑：

为了避免“基于意见”的接近投票，我更改了标题。我认为规范不矛盾，我也不是在征求其他人关于它是否矛盾的观点。

我意识到它实际上并不矛盾，我只是试图理解它的含义（鉴于其措辞）。

我以为我对 SVG 有相当不错的理解，包括viewport、viewBox和用户坐标系。

在下面的第一个示例中，我们使用与viewport具有相同纵横比的viewBox。正如预期的那样，用户坐标系旋转不会扭曲任何角度。

body {
  height: 500px;
}

svg {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}

<svg id="s1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200" preserveAspectRatio="none">
    <style>
      polygon {
        transform: translate(100px, 0px);
        animation: 2s ease-in 1s 1 normal forwards rotate-down;
        fill: green;
      } …