仿写网页中遇到的问题以及解决方案

最近两周，我在学习前端的一些东西。在 HTML5 和 CSS3 的学习过程中，选择了小米官网为仿写对象。由于 JavaScript 正在学习中，jQuery 与 Bootstrap 只做了大致了解，所以网页只用了 HTML5 和 CSS3 来实现。

第一个问题是，写出来的网页，无论将 width 调到多大，甚至100%，背景与网页边框之间总会留白。margin，border，padding 也都调整为零，可还是解决不了。

后来经过同学帮助和上网调查，发现了解决方案：在CSS中添加如下代码

* {
    margin: 0;
    padding: 0;
}

它的作用是让网页中的所有标签的 margin 和 padding 都为零，这样网页就显得比较正常了：

---

第二个问题是，一个 <input> 的输入框，鼠标在指向其一部分内部区域时，并没有变成文本光标，也无法将焦点聚集到文本框。这个问题也着实困惑了我好久，怎么也想不通。

从本身的盒子模型出发，仔细检查。没有问题。到最后实在想不通了，偶然间发现，旁边的盒子模型的宽度好像长的有些过分。将其改短了之后，发现这个问题奇迹般的好了。

在思考之后，得出了结论：旁边的盒子模型 z-index 数值大于输入框的 z-index ，导致了在布局上是底层一点的；而旁边的盒子模型恰好宽度有点长，将输入框的一部分盖住了，所以才出现了这种情况。

---

第三个问题，是关于一道简单的算法题。

给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。

你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。

示例:

给定 nums = [2, 7, 11, 15], target = 9
因为 nums[0] + nums[1] = 2 + 7 = 9
所以返回 [0, 1]

我依照固有思路研究之后做出来了，但是提交的时候，最后一个测试例子没有通过，超时了。据我猜测是最后一个测试用例的数组长度过于大，两层 for 循环的效率过于低下，所以超时了。

class Solution:
    def twoSum(self, nums, target):
        """
        :type nums: List[int]
        :type target: int
        :rtype: List[int]
        """
        for index_a, a in enumerate(nums):
            for index_b, b in enumerate(nums):
                if index_a == index_b:
                    continue
                if a + b == target:
                    return [index_a, index_b]

后来，我上网查了相关资料，发现了一个十分简单并且时间复杂度也低的解法：

class Solution:
    def twoSum(self, nums, target):
        """
        :type nums: List[int]
        :type target: int
        :rtype: List[int]
        """
        dic = {}
        for i, num in enumerate(nums):
            if num in dic:
                return [dic[num], i]
            else:
                dic[target - num] = i

这个解法用了哈希表的思想，通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度。

用一个字典的 keys 来记录 [target - num] ，相应的 value 记录此时 num 所对应的 index ，然后最多只用遍历一遍数组 （或列表），就能求出最终结果。这种方法效率很高，代码看着也清晰整洁，比我自己写的不知道高到哪里去了。

---

这周的问题，给了我如下感觉：
- 一些小问题，细节方面的问题会困扰很久，影响学习效率，要及时解决
- 进度方面还是有些慢，需要加强自身的时间管理
- 学习一些东西的时候，要及时做适当的笔记，同时进行敲代码的练习
- 思路要灵活，不要一条道走到黑，适当变通是合理的