第一次写代码的小结

开始小结

如果没什么意外，此刻的你:

尝试修改、理解了 index.html，也就是一个网站的首页。
知道了如何 Debug 的基本流程，并着手实践过了。

在此刻做一个小结，可以更好的展望后续的学习。如果此前已经上手尝试了多次，这部分小结的内容会更有价值一些，反之，权作为一个知识性的概览。

选择『万能』的实践方法

HTML 与 CSS 算不算编程语言？
仁智各见，不少程序员不认为 HTML、CSS 是编程语言，因为它们本质上没有什么逻辑上的(复杂)运算。
而争议存在的本身，也侧面反应了 (在多数应用层面) HTML+CSS 并不是复杂的技术。

另外一方面，当我们把目光放在整个产品之上时，就一定会控制旁支技术实现上的复杂度。
多数时候，HTML+CSS 就属于这旁支部分。
所以，我们要把它们变得简单，这就需要自己总结，掌握一些相对『万能』而高效的方法。

视觉如何转成技术实现？

假设，我们脑海中已经有了设计稿，或者已经有一个现成的视觉稿，如何转成 HTML + CSS 的实现呢？

宏观来说: 布局一般分为两种，一是默认布局(自动)，一是绝对布局(硬凑)。
多数情况下布局是默认自动的，因为组成页面的元素，其内容是不固定的，比如一个 DOM 元素内的文本可以是 100 字也可以是 1000 字，但不论文字多少它应该都能得到合理的渲染。而且浏览器窗口宽高会被用户调整，桌面端和移动端在不同设备上默认的尺寸也不一样。
而特定视觉下(一般是某个局部)，采用硬凑的绝对布局就比较多了。硬凑，是指类似 top & left 这样的 CSS 样式属性，它们生效的前提，是父对象逐层往上，直到 position 的属性为 relative、absolute、fixed 之一，便以此父对象为参照点。以 top 属性为例，它并不是指相对于窗口的 Y 轴上的坐标，而是其父对象(或者父对象的父对象 .etc)的 Y 轴。

微观来说: 某个元素的布局其实就相当于一个容器(通常是 div 类型)，定义容器的 margin、padding 的属性，就可以完成基本的布局了。全局性的布局，本质上也是各个元素布局后的综合体，处理好单个元素，也就能处理好整个页面了。

常见的细节: 剩下常见的细节，就是字体、行高、间距，文字颜色。文字颜色默认是 #000000，我们通常会设定为 #333333 或者其它按需调整的值，行高可能会调整为 1.5、 1.8、2.1；以确保整体的页面视觉多一些美感。而很多网站，即使看似新兴创业公司的官网，怎么看就是奇怪，甚至于难看，多数时候就是行高、文字颜色没有处置，采用了默认值。

常用的几种 DOM 标签: 一般来说，div、span、p、img 这些常用的 DOM 元素就足够排版的需要了，特殊场景就使用特定的元素，比如表格(table)，不拘泥于教条，为己所用。

谋定后动，追求效率

我自己第一次接触编程，是学校里的电脑课，差不多二十年前的事情了……
印象很深的是一道题目是完成 1 到 100的连加，我使用的办法是 (100+1) * 100/2 这种方式，老师则问，为什么不让电脑自己计算呢 (1+2+3+4....+100)？
刚开始会觉得老师是对的，真正实践过程，慢慢才会理解，哪些时候让人思考，哪些时候让机器运算，是需要平衡的。这个平衡的过程是一段相对漫长的过程，时间久了，才会形成自己的感觉。没有人的思考，机器是很笨拙、低性能；人类思考过度，节省机器微乎其微的性能，也会显得人类很可笑。

在你使用 HTML+CSS 完成一个页面的时候，要心里有底。我们要先知道页面的元素如何进行分解(HTML 结构)，然后逐渐调整具体的样式(CSS)。
这里有两种方式：一种是直接的设计稿，并且标注清楚的(每个元素的长宽高、色值、间距、字体等等)；另一种这是心里有底或者有所参照的页面。我个人一般推荐采用后者的方式，这样能减少不必要的沟通，开发的效率也更高。至于前者的方式，在团队工作中又逃脱不了，为了保证最高的效率，应该是有一套基本的规范，以减少标注本身的信息量，这对开发者和视觉设计师都有一定要求，此处不做额外阐述。

简而言之: 谋定后动，追求效率。
对于效率的追求，也应该体现在代码中: 要尽可能减少代码量。

不拘泥于实施细节的琐碎

比如 CSS 样式中常见的 padding & margin，下面的几种写法都是正确的:

.demo {padding: 10px 15px 20px 30px;}
.demo {padding: 10px 15px 30px;}
.demo {padding: 10px 15px;}
.demo {padding: 10px;}

padding 实际上是 padding-top、padidng-right、padding-bottom、padding-left 四个分属性共同组成的。padding: 10px 15px 20px 30px; 相当于从 0 ℃ 开始顺时针，即 top right bottom left。

但切记，不强求自己一定要记住，实际情况下试一试就明白了。上面几个规则都有效的前提下，自己感到混淆，那么就写全四个属性的写法，避开其它的写法就可以了。

假设，在面试的时候，按照本文提倡的做法，被刷掉是很正常的；确实，我们的课程，从来不是为这种场景设计的。
我们需要思考一个问题，知识的本质是什么？

从整体的产品角度出发，在知道如何实施的前提下，就不要在乎实施的细节，因为，它们的技术难度是最低的，顺手拈来而已。

即使是我， top right bottom left 也会混淆，稍微试一试就好了。
有时是比较长时间没有碰 HTML+CSS，手生了。还有呢，主要是因为在其它(代码语言、框架)体系中混淆了，虽然也是类似的逻辑与写法，但坐标系是不一样的，可能是 left top right bottom。
如果有人因此而嘲笑我，从某种角度来说，一方面或许真的是记忆力不够好活该被笑，另一方面肯定说明对方的见识太少；后者明显更糟糕。不过，(如无必要)我仍然不会花时间死记某些规则，因为真不算什么事情，熟自然巧，『知』了就自然『熟』了。
写下这小段文字，不是在给我们找理由，可以对技术不求甚解的同时又心安理得。如果从未在某个领域有所擅长，其实并『没有资格』判定什么重要什么不重要，能多记一些就多记一些；反之，就听我的，这些实施的细节问题，并不重要，知其然即可，记不住没有关系，不用患得患失。当然，也不要因此觉得自己路子野，而少了一份那种天生的骄傲。

有很多方法实现同一个效果，但要知道缘由

我们会尽可能追求最佳实践，但 最佳实践 是一种思路，并非执念，更要灵活思辨。
一个效果，实现的方法很多。很多时候，当你想要实现什么效果的时候，具体的代码片段完全可以先从搜索引擎上获得，但最好要理解代码本身的思路。

比如在 FirstWeb 中，我们进行的第一次写代码，里面一部分 CSS 逻辑，是将内容的主体部分，进行垂直方向居中。
假设浏览器窗口的尺寸是固定的，当前内容(文字)是固定的，那么最简单的办法就是使用 padding 或者 marging，凑出一个固定的值就可以了。
但在实际世界里， 假设 往往并不现实。我们要实现一个元素的垂直居中，你可以在搜索引擎中找到办法。有纯 CSS 的，有 Javascript 的，一般情况下，如果能不引入 Javascript，就尽量用 CSS 解决。

垂直居中，从自然思维的角度出发，应该很简单吧。实际上并不容易，因为一个 DOM 元素，通过 CSS 渲染的时候，自身是不知道自己宽、高的绝对值的。
在 FirstWeb.app 中的 CSS 样式中，我们用了 CSS3 里的一个 transform 属性来实现，transform 的时候，元素就能获得了 DOM 自身的尺寸信息。

.cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.cover .container{
        position: relative;
        top: 45%;
        transform: translateY(-50%);
}

基本逻辑就是: 1, 一个父元素，占满屏幕的 100%； 2，先让自己往上移自身的 height 的 50%，又令其位于屏幕垂直方向的 50% (实际代码是 45%，这样视觉看起来会更舒服一些)。
假设屏幕的高度为 h，当前 DOM 元素的高度为 d，那么translateY(-50%) 相当于 -0.5d，而 top:50% 相当于 0.5h；两者和起来，也就是 -0.5d + 0.5h = (h-d)/2, 而 (h-d)/2 就意味着 DOM 的 Y 坐标，位于垂直方向居中的状态了。
CSS3 的 transform 这会引入浏览器兼容的问题，但不是什么大的问题，以后自己具体场合下具体修正就好。

相对正确的用法

当一个效果，可以用很多方法实现的时候，哪个会更正确呢？
我们一直强调，不要纠结于这些问题，放眼问题是否被解决才是根本。但这样倾向于自由主义，反而对学习者自身有不低的要求，不然就容易失去主心骨，茫然不知所从。
自由主义，是存在边界的，这个边界就是 『相对正确』且是自然的解决方案。感觉触及到了这个边界，找到了一个可行的方案，就停下来，不再继续深入，以免浪费过多的时间。

比如 FirstWeb.app 中的第一次代码尝试，里面的样式中，一部分是实现一个页面的大背景。
可以叠一个 img 元素在背后，然后将其设定为跟随窗口尺寸的全屏大小，并且 height 也设定为 100%，超出 (overflow) 就 hidden。
但这样的实现方式并不算恰当，而且，代码量也增加了。应该用 background、background-repeat、background-position 这几个属性，会更加自然。

问题就来，怎么知道是一个『相对正确的方案』呢？
一方面，刚开始的时候要诉诸于搜索引擎，因为这些技术积累，是由很多细节构建而成的，对于初学者而言，一本砖头般的参考书的价值是相对有限的。
另一方面，自己主动的思考可以让我们更容易正确。假设 CSS 这门语言是你设计的，那么当前你遇到样式相关的问题，是否会在设计 CSS 的时候提供 一些样式属性 作为解决方案呢？如果感觉应该会提供，那么就盲试看能不能 hit 到对应的 keyword，在代码编辑器中，对应的属性会自动补全作为候补。然后，再去了解对应 keyword 的含义，也就掌握它了。

会不会觉得对初学者提了很高的要求？
有点高，但也不算高要求，只是一种『翻阅技术文档或者直接上手』的基本技巧。