Update translation of 2-ui/1-document/09-size-and-scroll (#674)

Update translation of 2-ui/1-document/09-size-and-scroll (#674)

Author: leviding

2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md

@@ -1,7 +1,7 @@
-解决方式：
+解决方案：
 
 ```js
 let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
 ```
 
-换句话说：（完全高度）减去（已滚动的高度）减去（可见部分的高度）— 得到的结果就是下方隐藏部分的高度。
+换句话说：（完全高度）减去（已滚出顶部的高度）减去（可见部分的高度）— 得到的结果就是滚动出来的底部的部分。

2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md

@@ -4,8 +4,8 @@ importance: 5
 
 # 相对于底部滚动了多少？
 
- `elem.scrollTop` 属性是从顶部滚动出来的部分的大小，如何获得 `scrollBottom` —— 从底部滚动的尺寸？
+`elem.scrollTop` 属性是从顶部滚动出来的部分的大小。如何获得底部滚动的大小（我们称其为 `scrollBottom`）？
 
-编写适用于任意元素的代码。
+编写适用于任意 `elem` 的代码。
 
-P.S. 请检查您的代码：如果没有滚动条或元素完全向下滚动，那么它应该返回 “0”。
+P.S. 请检查你的代码：如果没有滚动，或元素底部已经完全滚动完成，那么它应该返回 `0`。

2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md

@@ -1,16 +1,16 @@
-为了获得滚动条宽度，我们可以创建一个带有滚动条的元素，但是没有边框和内间距。
+为了获得滚动条的宽度，我们可以创建一个带有滚动条的元素，但是没有边框（border）和内边距（padding）。
 
-然后，它的完全宽度 `offsetWidth` 和内容宽度 `clientWidth` 之间的差就是滚动条的宽度：
+然后，它的全宽度 `offsetWidth` 和内部内容宽度 `clientWidth` 之间的差值就是滚动条的宽度：
 
 ```js run
-// 创建一个包含滚动条的块
+// 创建一个包含滚动条的 div
 let div = document.createElement('div');
 
 div.style.overflowY = 'scroll';
 div.style.width = '50px';
 div.style.height = '50px';
 
-// 必须添加到文档中，否则尺寸为 0
+// 必须将其放入文档（document）中，否则其大小将为 0
 document.body.append(div);
 let scrollWidth = div.offsetWidth - div.clientWidth;
 

2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md

@@ -2,10 +2,10 @@ importance: 3
 
 ---
 
-# 怎样计算滚动条宽度？
+# 滚动条的宽度是多少？
 
-编写返回标准滚动条宽度的代码。
+编写代码，返回标准滚动条宽度。
 
-对于Windows，它通常在 `12px` 和 `20px` 之间变化。如果浏览器不为它保留任何空间，那么它可能是 `0px`。
+对于 Windows，它通常在 `12px` 和 `20px` 之间变化。如果浏览器没有为其保留任何空间（滚动条以半透明的形式处于文本上面，也是可能发生的），那么它可能是 `0px`。
 
-P.S. 代码应该适用于任何HTML文档，且不依赖于它的内容元素。
+P.S. 该代码应适用于任何 HTML 文档，而不依赖于其内容。

2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md

@@ -1,23 +1,23 @@
-为小球设置 `position:absolute`。这意味着它的 `left/top` 坐标根据相对它最近的并且设置了定位的元素来测量，这个元素的有效范围就是 `#field`（因为它有 `position:relative`）。
+小球具有 `position:absolute`。这意味着它的 `left/top` 坐标是从最近的具有定位属性的元素开始测量的，这个元素即 `#field`（因为它有 `position:relative`）。
 
-坐标从设置了相对定位的最近的元素的左上角开始：
+坐标从场（field）的左上角内侧开始：
 
 ![](field.svg)
 
-该元素内容区域的宽/高是 `clientWidth/clientHeight`，所以该元素有效范围的中心的坐标为 `(clientWidth/2, clientHeight/2)`。
+内部的场（field）的 width/height 是 `clientWidth/clientHeight`。所以场（field）的中心坐标为 `(clientWidth/2, clientHeight/2)`。
 
-...不过如果我们将 `ball.style.left/top` 设置为上面计算出的值，那么最终的效果与有效范围的中心重合的不是小球的中心，而是小球左上角的坐标：
+……但是，如果我们将 `ball.style.left/top` 设置为这种值，那么在中心的会是球的左上边缘，而不是整个球：
 
 ```js
 ball.style.left = Math.round(field.clientWidth / 2) + 'px';
 ball.style.top = Math.round(field.clientHeight / 2) + 'px';
 ```
 
-这是它将显示出的效果：
+这是它将显示出来的效果：
 
 [iframe height=180 src="ball-half"]
 
-为了把球中心和有效范围中心对准，我们应该把球移到左边宽度的一半，把 top 设置为有效范围高度的一半：
+为了使球的中心与场（field）的中心重合，我们应该把球向左移动球宽度的一半，并向上移动球高度的一半：
 
 ```js
 ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
@@ -26,25 +26,23 @@ ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'p
 
 **注意：陷阱！**
 
-如果 `<img>` 没有宽/高，代码将无法正常工作：
+当 `<img>` 没有 width/height 时，代码将无法可靠地工作：
 
 ```html
 <img src="ball.png" id="ball">
 ```
 
-当浏览器还不知道图片的宽/高（图片的尺寸可能来自标签属性或 CSS）的时候它会假设它们的尺寸为 `0`直到图片加载完成。
+当浏览器不知道图片的 width/height（通过标签 attribute 或 CSS）时，它会假定它们等于 `0`，直到图片加载完成。
 
-实际使用过程中，浏览器会在图片第一次加载完成后缓存该图片，方便下次再次访问时立即显示图片。
+但在实际中，第一次加载后，浏览器通常会缓存该图片，并在下一次加载时，浏览器会立即拥有该图片的大小。但是在第一次加载时， `ball.offsetWidth` 的值为 `0`，这会导致错误的坐标。
 
-但是在第一次加载时 `ball.offsetWidth` 的值为 `0`，这会导致错误的坐标出现。
-
-此时我们应该为 `<img>` 添加 `width/height` 属性：
+我们应该通过在 `<img>` 中添加 `width/height` 来解决这个问题：
 
 ```html
 <img src="ball.png" *!*width="40" height="40"*/!* id="ball">
 ```
 
-...或者在 CSS 中提供尺寸：
+……或者在 CSS 中提供大小：
 
 ```css
 #ball {

2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md

@@ -2,19 +2,19 @@ importance: 5
 
 ---
 
-# 将小球置于有效范围的中心
+# 将小球置于场（field）中心
 
-这是源文件：
+源文件的效果如下：
 
 [iframe src="source" edit link height=180]
 
-有效范围的中心坐标是多少？
+场（field）的中心坐标是多少？
 
-计算并将小球置于有效范围中心：
+计算它们，并将小球置于场（field）中心：
 
 [iframe src="solution" height=180]
 
-- 元素应该通过 JavaScript 移除，而不是 CSS。
-- 代码应该在不限制小球尺寸（`10`、`20`、`30` 像素）或任何有效范围内的尺寸的情况下正常运行，而不是直接为元素绑定尺寸。
+- 该元素应该通过 JavaScript 移动，而不是 CSS。
+- 该代码应该适用于任何大小的球（`10`、`20`、`30` 像素）以及任意大小的场（field），而不应该绑定到给定值。
 
-P.S. 当然了，置中的操作可以通过 CSS 完成，但是这里我们需要通过 JavaScript 完成。此外，当必须使用 JavaScript 时，我们可能会遇到其他话题或更加复杂的情况，这里我们只是做一个 “热身”。
+P.S. 当然了，置于中心的操作通过 CSS 也可以完成，但是这里我们需要通过 JavaScript 完成。此外，当必须使用 JavaScript 时，我们可能会遇到其他话题以及更加复杂的情况，这里我们只是做一个“热身”。

2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md

@@ -1,6 +1,6 @@
 不同点：
 
-1. `clientWidth` 值是数值，然而 `getComputedStyle(elem).width` 返回一个包含 `px` 的字符串。
-2. `getComputedStyle` 可能返回非数值的结果，例如内联元素的 `"auto"`。
-3. `clientWidth` 是元素的内部内容区域加上内间距，而 CSS 宽度（具有标准的 `box-sizing`）是内部**不包括内间距**的空间区域。
-4. 如果有一个滚动条，一般浏览器保留它的空间，有的浏览器从 CSS 宽度中减去这个空间（因为它不再用于内容），而有些则不这样做。`clientWidth` 属性总是相同的：如果保留了滚动条，那么它的宽度将被删去。
+1. `clientWidth` 值是数值，而 `getComputedStyle(elem).width` 返回一个以 `px` 作为后缀的字符串。
+2. `getComputedStyle` 可能会返回非数值的 width，例如内联（inline）元素的 `"auto"`。
+3. `clientWidth` 是元素的内部内容区域加上 padding，而 CSS width（具有标准的 `box-sizing`）是内部内容区域，**不包括 padding**。
+4. 如果有滚动条，并且浏览器为其保留了空间，那么某些浏览器会从 CSS width 中减去该空间（因为它不再可用于内容），而有些则不会这样做。`clientWidth` 属性总是相同的：如果为滚动条保留了空间，那么将减去滚动条的大小。

2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md

@@ -2,8 +2,8 @@ importance: 5
 
 ---
 
-# 不同点：CSS 宽度与 clientWidth
+# CSS width 与 clientWidth 的不同点
 
-`getComputedStyle(elem).width` 与 `elem.clientWidth` 之间的差别在哪？
+`getComputedStyle(elem).width` 与 `elem.clientWidth` 之间有什么不同点？
 
-指出至少三种不同点，越多越好。
+指出至少三种不同点。当然越多越好。